Playing With Ext The Easy Way (玩EXT简单方法)--firebug下调试ext

solem

墨衍会员 · AI 创作全网分发码龄19年

关注

转载最新推荐文章于 2026-11-09 20:38:03 发布 710 阅读 AI 写同款· GEO 优化 ›

书写ext 的基本资源和一些例子，帮助快速上手立即下载

蹒跚学步

第一步 - 入门

想必您已经听说过 Ext、浏览了在线演示，并且尝试阅读API文档。不过，面对复杂的API文档，您却不如何下手？！

第二步 - 起步

通览过API文档，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么……

不论您的目标是什么，您都可以依照本文快速的开始使用Ext。不，不用搭建服务器，您所需要的仅仅是Firefox浏览器和Firebug调试插件。如果还没有安装，那么现在就是一个好机会。

firebug使用教程

牛刀小试

打开Ext API文档，您已经上路！
单击 F12 打开 Firebug 控制台。
如果您的 firebug 控制台处于单行模式（以 '>>>' 开头），那么请单击右下角的红色上箭头以开启多行编辑模式。
输入以下代码，并敲击 Ctrl-Enter 来运行:

Ext.get(document.body).update('<div id="test"></div>');

上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。刚才那些API文档已经被删除，但 Ext 代码依旧生效，并且随时为您效劳。

现在，我们假设您希望简单的添加一个面板元素（Panel），但对Ext.Panel的API冗繁的说明无能为力。那么试着将这些代码添加到 firebug 的控制台中：

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 。嗨！您的面板元素已经诞生。

很好，不过如果修改一些选项呢？用下边的代码替换刚才的那些代码：

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 });