【附件】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 吧。
分享到:
相关推荐
EXT 2.0学习资料 关于EXT的基本入门学习的PDF
Ext学习,入门教程,由浅入深,不断更新中。。。。
很好的Ext学习资料,希望对你的学习有所帮助!好好学习!
学习EXT的入门知识和实际应用指南 为格式DOC文档
ExtJs demo ExJS+Spring+Struts2, 有点点价值的学习资料
ext 学习资料 ext基础知识,基础教程。
可作为ext学习的基础资料。详细介绍了ext的开发的主要内容。是学习ext的好资料。
Ext是一个Ajax框架,用于在客户端创建丰富多彩的web应用程序界面,是在Yahoo! UI的基础上发展而来的。官方网址:http://www.extjs.com/
资源名称:Ext2.0学习入门资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
1.6. 入门之前,都看helloworld。 1.6.1. 直接使用下载的发布包 1.6.2. 只把必要的东西放进项目中 2. 震撼吧!让你知道ext表格控件的厉害。 2.1. 功能丰富,无人能出其右 2.2. 让我们搞一个grid出来耍耍吧。 2.3. ...
Ext 从入门到精通 很好的学习资料,内容,丰富诙谐幽默。 正在想学习Ext的童靴们赶快下吧~~
Gwt-ext学习笔记之基础篇、安装、配置、例子。
本人从网上找的比较经典的gwtext入门资料,版权不属于本人所有。适合gwt的初学者,内附详细图片说明
ext 狠多 学习资料。。。 extAjax支持.pdf ext基础核心结构.pdf Ext.pdf Ext PPT教程 (组件)
ext的使用入门,特别适合新手学习和使用。给好评哦亲
Ext入门学习.docx
里面包含EXT的源代码和教程,适合刚接触的同学,很不错