Extjs学习

来源：互联网发布：爱壁纸hd for mac 编辑：程序博客网时间：2024/04/28 06:53

相关资料下载：http://www.ibeifeng.com/read.php?tid=1779&fpage=0&toread=&page=1

1.下载:http://extjs.com/products/extjs/download.php 下载ext后解压缩的文件目录:

　　 adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。

　　build：压缩后的ext全部源码(里面分类存放)。

　　docs： API帮助文档。

　　exmaples：提供使用ExtJs技术做出的小实例。

　　resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。

　　source：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的协议。

　　Ext-all.js：压缩后的Ext全部源码。

　　ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。

　　 ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。

　　 ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。

2.测试实例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

Ext.onReady(function fn() {

//alert('ExtJS库已加');

//Ext.MessageBox.alert("hello","Hello,easyjf open source");

var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open

source</h1>'});

win.show();

} );

</script>

<style>

font-size:14px;

}

</style>

</head>

<body>

打印这块地方!<br>

<strong>打印这块地方!</strong><br>

</div>

</body>

</html>

说明:

a.应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。

b.Ext.onReady:　在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数

c.Ext.MessageBox.alert("hello","Hello,easyjf open source"); 弹出一个信息框

d.var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

win.show(); 表示在页面中显示一个窗口.

3.组件结构

Ext组件是由 Component类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。

组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：

xtype Class------------- ------------------box Ext.BoxComponent 具有边框属性的组件button Ext.Button　　按钮colorpalette Ext.ColorPalette 调色板component Ext.Component　组件container Ext.Container　容器cycle Ext.CycleButton　dataview Ext.DataView 数据显示视图datepicker Ext.DatePicker 日期选择面板editor Ext.Editor　编辑器editorgrid Ext.grid.EditorGridPanel 可编辑的表格　grid Ext.grid.GridPanel 表格paging Ext.PagingToolbar 工具栏中的间隔panel Ext.Panel　面板progress Ext.ProgressBar 进度条splitbutton Ext.SplitButton 可分裂的按钮tabpanel Ext.TabPanel　选项面板treepanel Ext.tree.TreePanel 树viewport Ext.ViewPort 视图window Ext.Window　窗口

工具栏组件有---------------------------------------toolbar Ext.Toolbar　工具栏tbbutton Ext.Toolbar.Button　按钮tbfill Ext.Toolbar.Fill　文件tbitem Ext.Toolbar.Item　工具条项目tbseparator Ext.Toolbar.Separator　工具栏分隔符tbspacer Ext.Toolbar.Spacer　工具栏空白tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮tbtext Ext.Toolbar.TextItem　工具栏文本项

表单及字段组件包含：---------------------------------------form Ext.FormPanel　Form面板　checkbox Ext.form.Checkbox　checkbox录入框combo Ext.form.ComboBox　combo选择项datefield Ext.form.DateField　日期选择项field Ext.form.Field　表单字段fieldset Ext.form.FieldSet　表单字段组hidden Ext.form.Hidden 表单隐藏域htmleditor Ext.form.HtmlEditor　html编辑器numberfield Ext.form.NumberField　数字编辑器radio Ext.form.Radio　单选按钮textarea Ext.form.TextArea　区域文本框textfield Ext.form.TextField　表单文本框timefield Ext.form.TimeField　时间录入项trigger Ext.form.TriggerField　触发录入项

组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。

如：

var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});panel.render("hello");

　render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动谳用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，如下：

new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

4.事件处理

ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager对象管理，与浏览器W3C标准事件对象Event相对应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。

实例：

说明：

1. Ext.get("btnAlert")得到一个与页面中按钮btnAlert关联的Ext.Element对象，可以直接调用该对象上的 addListener方法来给对象添加事件，同样实现前面的效果。在调用addListener 方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。

2. addLinster方法的另外一个简写形式是on 改写成：

Ext.onReady(function(){ Ext.get("btnAlert").on("click",a); });3. ExtJS支持事件队列，可以往对象的某一个事件中添加多个事件响应函数;

3. ExtJS还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：

Ext.onReady(function(){ Ext.get("btnAlert").on("click",a,this,{delay:2000}); });

由于在调用addListener的时候传递指定的delay为2000，因此当用户点击按钮的时候，不会马上执行事件响应函数，而是在2000毫秒，也就是两秒后才会弹出提示信息框。

五．面板

面板Panel是ExtJS控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。面板的类名为Ext.Panel，其xtype为panel，下面的代码可以显示出面板的各个组成部分：

Ext.onReady(function(){       new Ext.Panel({              renderTo:"hello",              title:"面板头部header",              width:300,              height:200,              html:'<h1>面板主区域</h1>',              tbar:[{text:'顶部工具栏topToolbar'}],              bbar:[{text:'底部工具栏bottomToolbar'}],              buttons:[{text:"按钮位于footer"}]              }); });

六.

在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

七．

ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

Ext.onReady(function(){              Ext.get("btnAlert").on("click",function(){              Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){                      if(button=="yes"){                              //执行删除操作                              alert("成功删除");                      }              });              });             });

八．

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:150,

width:600,

columns:[{header:"项目名称",dataIndex:"name"},

{header:"开发团队",dataIndex:"organization"},

{header:"网址",dataIndex:"homepage"}],

store:store,

autoExpandColumn:2

});

添加了sortable为true的属性，表示该列可以排序

可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示，xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可.