Extjs新手教程
这是我在iteye发的第一篇博客,目的在于把自己学的记录下来,如果可以帮到其他人,那我感到很荣幸,自己的水平很有限,如果有什么不足还望指正。
去年年末开始接触extjs版本是最新的4.1.1但只是理论上的看看,没有写代码,新年到公司后,没有什么活,就决定把以前的一个办事流程改写成extjs的,公司目前没有美工,界面全部是开发人员自己做,而且没有统一的风格,自己审美观也差,所以就用人家做好的吧。先说说我使用以后感觉到的好处。
1. 风格统一,比较大气,比我目前做的要好多了。2.extjs和flex,swing等在组件的结构上都是基于组件开发的,这种结构把创建,渲染,布局很好的管理起来,通过继承已经有了的组件,可以快速开发自己定义的,而且通过覆盖父类中的特有的方法,可以在组件布局,创建,渲染过程中对于组件进行更加细微的控制。如果不是很个性化的项目,一般的项目完全够用了。
开始前的准备
要准备的东西很简单,就两个:一个是js编辑工具,一般就是eclipse了,然后是最重要的,就是extjs的api了,我觉的官方的api做的很不错了,就是全是英文的,要仔细读,而且有些没有例子,看起来不是很明白,但对于初学者来说已经很好的了。extjs的api是用php写的,所以你要用起来,先要装个apache服务器
我的电脑里装的是amfphp,随便个版本就可以了,把extjs的api放到www的目录下,运行ampphp就可以了,amfphp自带一个apache服务器,和一个mysql数据库。这个东西是为flex的amf数据格式而写的,就是负责flex使用amf数据格式,于后台传递数据的,java语言也有一个版本是openamf。
简单的例子
我觉的从简单的例子开始比较好,建议在学习的时候先用,等到了一定程度,看源码,不要一开始就看源码,眼过千遍,不如手过一遍。
先说说extjs 的使用场合吧,extjs不适合门户网站,因为extjs太大了,中国的网速也不是很快,如果门户网站的话就完蛋了,一般extjs 的使用场合是办公平台,就是那种打开页面一天不用关闭的那种,即使网速慢也只是加载一次而已,如果使用mvc结构,可以改善extjs加载慢的问题。我以前的版本没有学过,在网上看有很多的不同,在这里我也就不说和其他的不同了,有兴趣的网上这样的博客很多,自己搜搜就有了。
首先是一个使用最多的函数:Ext.create("全路径的类名",{//初始化参数})。相当于new 全路径类名。作用是创建一个类的实例,返回改实例的引用。接着我们创建一个类,代码如下:
Ext.create("Ext.container.Viewport",{ id:"maincontainer", title:"XX管理平台", layout:"border", frame:true, items:[{ region:"north", html:"北方"},{ region:"south", html:"南方"},{ region:"west", html:"西方"},{ region:"east", html:"东方"},{region:"center", html:"中" }] });
运行下试试,但是首先要引入ext-all-debug.js和resource目录下面的css中的ext-all.css,最好把resource放到
项目的根目录下,然后运行上面的程序就能看到一个布局分为上,下,左,右,中布局的平台了。viewport这个类创建的对象默认是渲染到body标签的,会覆盖页面中的所有东西。