最快捷测试Ext对象属性的方法

最快捷测试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.

评论

2 楼 345161974 2010-06-28  

wzglovejava 写道

今天在ＪＥ上看到了这个，我也在自学Extjs的，但是我在火狐浏览器上按下F12调用firebug时，上面说我的控制台面板已经被禁用，然后还有就是下面Ⅲ的步骤一下都不能实现了，包括步骤Ⅲ。。请教，如何解决。

按下F12，FireBug上面有个脚本选项卡，你给启用了即可。

1 楼 wzglovejava 2010-06-28  

今天在ＪＥ上看到了这个，我也在自学Extjs的，但是我在火狐浏览器上按下F12调用firebug时，上面说我的控制台面板已经被禁用，然后还有就是下面Ⅲ的步骤一下都不能实现了，包括步骤Ⅲ。。请教，如何解决。