最快捷测试Ext对象属性的方法
1:前言
你已经听过Ext,在网上也看了很多例子,而且决定从读API开始学习Ext。好吧,我们言归正传,你渴望去学习演示Ext,但是,如果我们没有一个服务器,或者一个环境去演示,那我们怎么办?现在,我就告诉你。
2:准备
你研究了API并且你看到了很多有趣的方法你想去立马试试,但是,你总不希望就为了看那一点的功能,我得把Ext的所有的可用的配置搭建起来,仅仅是为了只看那一个有趣的方法,这样,太浪费时间了。
不管出于什么样的原因,这里有一个很简单的快速的方式去立马演示Ext,不需要服务器,你需要的仅仅是火狐浏览器,而且,必须是装了FireBug的火狐,如果你现在还没有,那么就赶紧去下载安装上他吧!
3:接下来怎么做
Ⅰ用火狐浏览器打开Ext的API帮助文档,就在这个网页
http://www.extjs.com/deploy/dev/docs/上面(一定是在这个API的网页上面),我们会得到我们意想不到的惊喜;
Ⅱ按下火狐浏览器的快捷键F12,或者自己另行打开FireBug,看到Firebug的控制台了么?
Ⅲ如果你看到你的控制台有一行是这样‘>>>’,然后你顺着点击那个微小的红色的按钮,它在右下角,然后点击之后,它会弹出来一个窗口,我们可以在这里面编辑脚本;
Ⅳ首先敲入第一行,
Ext.get(document.body).update('<div id="test"></div>');
敲完之后按Ctrl-Enter去运行它.
我们可以看到,整个网页变成了一个div块,方才的网页不见了,那么,这就说明我们的脚本成功了。原因是为什么呢?那是因为,尽管刚才的API网页不见了,但是它的类库脚本还在加载在我们的浏览器之上。
现在,如果假设,我们看到了Ext.Panel的API,我们想测试下Panel,那么,就在我们看Panle的API的这个页面上面,我们再在我们刚此的代码上面加上这些代码,加上刚才的代码,也就是下面这个样子:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
编辑完之后,再次按Ctrl+Enter键,发现什么没有,我们看到这样的界面:
如果说我们想测试下加入一个属性会是什么样子的,那么我们就可以直接在构造器里面配置,比如我们现在给Panel加入一个collapsible(可收放)的属性。那么,我们在之前的代码上面,在额外的加上新的一行配置属性信息。如下:
Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content',
collapsible: true
});
按下Ctrl+Enter键,看到么?我们想要的效果出来了。
每次按下Ctrl+Enter键的时候,那个代码框会重新加载新的代码,所以,如果我们想加载其他的Dom对象,或者测试dom对象,那么我们得自己把代码框的代码清理掉,重新编写新的脚本。
最后,
You can add as much HTML as you need in the string passed to the update() method in the first line, and then write as much Javascript as you like to explore the Ext API.
- 大小: 24.2 KB
- 大小: 26.1 KB
- 大小: 63.4 KB
- 大小: 23.7 KB
- 大小: 18 KB
- 大小: 70.9 KB
分享到:
相关推荐
ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试
NULL 博文链接:https://hanxs8866-163-com.iteye.com/blog/1174152
extjs 4.0 Grid属性方法以及常用操作,板面属性和对象
很全,很强大的Ext常用属性总结让你写extjs代码时游刃有余的感觉。
EXT组件一些属性与方法(MessageBox)[文].pdf
EXT dojochina Ext类静态方法.rar EXT dojochina Ext类静态方法.rar
Ext、Ext4中各个组件、属性、方法详解,一个不漏;Ext学习入门及参考最好的资料
常用的知识\Ext_Tree属性方法.txt ,对于ext建树很有帮助
ext 的一些常用方法 ext 的一些常用方法 ext 的一些常用方法
ie9不支持ext对象的问题
Ext.Panel API翻译 -------Window属性
Ext AJAX submit方法实例Ext AJAX submit方法实例
详细介绍Ext按钮的属性,并将相应的图片与之一一对应!
经典Ext常用方法详解,帮助你攻克Ext难题。
EXT dojochina Ext类实例属性.rar EXT dojochina Ext类实例属性.rar
Ext JS官方提供的测试工具,可以对js进行完备的单元测试和集成测试等功能。。
EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例EXT测试小样例
EXT dojochina Ext方法重写.rar EXT dojochina Ext方法重写.rar
ext2文件扩展属性讲解[借鉴].pdf
本文详细介绍了在Ext中如何获取store的数据,对ext语法有一个比较详细的介绍,供新手阅读