第一章，初识ExtJS
0.ExtJS通常简称为EXT，它是一个非常优秀的Ajax框架，用JavaScript编写，与后台技术无关，可以用来开发具有炫丽外观的富客户端应用。
ExtJS是一个JavaScript库，它以HTML作为控件的骨干，以CSS作为样式的表现，以JavaScript作为粘合语言，可应用于不同浏览器的Ajax UI组件库，具备了Swing许多特性，并可兼容jQuery/Prototype等其他JS库。
1.ExtJS又简称Ext，
可以从www.sencha/products/extjs/download/
下载到Ext的最新版本。
2.常见的Ext开发工具
JsEclipse;Aptana;Spket;Dreamweaver;Komodo Edit.
推荐使用eclipse结合Spket来作为开发工具。
www.spket
3.在eclipse环境中安装Spket提示工具
(1).将spket中的子文件夹(plugins和features)拷贝到eclipse目录中覆盖原有的文件。
(2).打开eclipse点击Window-->Preferences，选择左侧的Spket展开，
选择JavaScript Profiles，右侧点击New(添加一个新的项目)，这里输入ExtJS,
点击右侧的Add Library，下拉列表中选择ExtJS，选中ExtJS，
点击右侧的Add File，选择下载的Ext解压包中的ext.jsb2点击打开（导入了代码提示包，默认选择Ext All）。
再选中ExtJS(上一级)点击Default-->OK
(3).重启eclipse测试
新建一个JavaScript Project，
New一个JS文件(test.js)，
在test,js上右键-->Open With-->选中Spket JavaScript Editor(表示我们使用的是Spket 它的代码提示功能)
输入Ext代码，如Ext.
第二章，使用Ext文件制作基本的Ext页面Hello Ext
应用Extjs需要在页面中引入Extjs的样式及Extjs库文件，
样式文件是resources/css目录下的extall.css这个文件，
而Ext的js文件库主要包括两个:
分别是adapter/ext目录下的ext-base.js，以及ext-all.js这两个文件。
ext-base.js表示框架的基础库，
ext-all.js是Ext的核心库。
示例：
<head>
<link type="text/css"rel="stylesheet"href="ext/resouces/css/ext-all.css"/>
<script type="text/javascript"src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript"src="extjs/ext-all.js"></script>
</head>
在引用了必备文件之后，就可以书写基于Ext的Js代码了。
如下示例(Ext版的Hello World)：
<script type="text/javascript">
Ext.MessageBox.alert("hello","Hello,This is Ext's MessageBox");
});
</script>
注意：这里的Ready表示页面的Dom加载完毕之后执行里面的代码，
这一点在实际开发中应用非常广泛，
因为为了保证我们的Ext代码能够正常的操作页面中的元素，
我们必须先等待页面中的Dom加载完毕之后才能操作，
否则就会出现不到对象的错误。
这段代码表示，当页面加载完毕之后，
执行Ext.MessageBox这一行的语句。
这里的alert方法和javascript里面的alert方法比较：
页面效果如下：
可以看到在这个页面中弹出了一个对话框，并且这个对话框可以任意的拖动。这个对话框完全是通过页面的样式进行控制的，
它要比默认情况下的window.alert()外观好看的多。
接下来我们使用Ext来显示一个窗口。
示例：
说明：这里，我们定义了一个Ext的Window，Window的标题是hello, Window的尺寸是300x200，里面的内容是一个一级标题标签。jquery弹出div窗口
实现效果如下：
页面弹出了一个窗体，该窗体也是可以任意拖动的。
第三章，Ext组件
1.组件的用法
组件可以直接通过new关键字来进行创建，
比如创建一个窗口：new Ext.Window()
创建一个表格：new Ext.GridPanel()
除了一些普通的组件以外，
一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般可以包含一个对象，
这个对象包含创建组件所需要的配置属性及值，
组件根据构造函数中参数的属性值来初始化这些组件。
示例：
该示例中我们使用new Ext.Panel()创建了一个Panel组件。
运行效果：
2.组件的配置属性
JSON数据：{属性：值}
在ExtJS中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都是可以在构造函数中使用一个包括属性名称及值的对象，这个对象中的信息也就是指组件的配置信息。
比如，我们要配置一个面板：
这里使用new Ext.Panel()，里面使用JSON数据来进行描述，定义它的title值是”面板”，html是面板的内容，height是面板的高度。
再比如，我们创建一个按钮：
这里使用new Ext.Button()表示创建一个按钮，
里面的参数是，
text是添加，表示创建的按钮里面的文字是添加。
Pressed是true，表示它是按下状态。
Height30表示按钮的高度是30像素。
Handler等于ptyFn表示点击该按钮的时候它所触发的函数。
关于ExtJS中各个组件的配置属性及具体含义，可以在ExtJS说明文档中进行详细了解。
第四章，事件处理
1.addListener(eventname,callback)
ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制可以响应用户的动作，监控控件的状态变化，更新控件视图的信息，与服务器进行交互等等。首先我们来看标准html中的事件处理：
在这段代码中我们定义了一个函数a()，它是弹出一个对话框，
我们在Html页面中对按钮添加一个事件，直接在标签里使用onclick=a()
它表示当我们点击这个按钮的时候，触发页面中定义的函数a()
在Ext中可以这样来做：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。