Ext学习入门及资料

【附件】ExtJs学习资料（包括：EXT+中文手册.chm、电子书、实例等）

 

转载自Ext中文社区：http://extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_(Chinese)

 

EXT新手建议：建立自己的工具箱（Toolkit）

我认为学习EXT开发最好的方法是，在真正开发之前，掌握好高级JavaScript知识， 就像鱼儿游在水里一样对JS运用自如。

自己可以创建JavaScript的类、明白类原型（class's prototype）的原理， 和明白函数的作用域都是有益的帮助。 明白Ajax为什么要异步方式也是其中的一个知识点。

论坛上50％所提出的问题很大原因是对JavaScript知识不牢固所至，而不是EXT API的问题。 当真正开始用EXT做开发了，那么安装目录下examples/*的文件夹超过70个例子便是研究的好对象， 这些例子为你展示了你日后将会使用的大多数技巧或方法。 接着，最好就是先拿examples/*的文件夹中例子练一练手，做一些简单、轻型的小项目。 如果直接拿EXT结合到程序去开发，很可能你会因为越来越复杂的问题泥足深陷。

把每一项的 知识点/技巧 都做成可单独运行文件，这样以便你以后参考，还有一个好处是，可以发到论坛上，然后我们放到examples/*的文件夹，以便我们的测试并协助你。 如果能按照以上的建议去做，我相信这是一个很好的累积。而且按照我的角度看，整个UI就是这样一点一点构建起来。

 

 

第一步 - 入门

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

第二步 - 起步

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

不论您的目标是什么，您都可以依照本文快速的开始使用Ext。不，不用搭建服务器，您所需要的仅仅是Firefox浏览器和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
});

敲击 Ctrl-Enter 。怎么样，一个可以伸缩的面板就配置好了。（注意面板右上角的小图标）

每次敲击 Ctrl-Enter ，第一行代码都会移除现有的内容，这样您就可以有一个干净的调试环境。这是一个简单的小技巧，十分方便您尝试各种配置选项。

您可以为update()函数添加所需要的 HTML 代码，无论多少。然后编写或多或少的 Javascript 来探索 Ext API。

还等什么？现在就去亲自实践 Ext Api 吧。