EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。
原创不易，转载请注明出处：EXTJS入门教程及其框架搭建
代码下载地址:http://www.zuidaima.com/share/1724474768788480.htm
首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具：extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：
1 | <script type=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script> |
2 | <script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script> |
3 | <link rel=" stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " /> |
4 | <script type=" text/javascript " src= "XXXXX.js "></script> |
并在BODY中加入下面这段JAVA SCRIPT：
01 | <script> |
02 | Ext.onReady( function () { |
03 | Ext.QuickTips.init(); |
04 | Ext.form.Field.prototype.msgTarget='side'; |
05 | var viewport=new Ext.Viewport( { |
06 | layout : 'fit', |
07 | border : false, |
08 | items : [new system.XXXXX()] |
09 | }); |
10 | viewport.render(); |
11 | }); |
12 | </script> |
其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。
附完整的代码：
PagingGridPanel.js
001 | Ext.namespace('system'); |
002 | system.PagingGridPanel = function(config) { |
003 | Ext.applyIf(this, config); |
004 | this.initUIComponents(); |
005 | system.PagingGridPanel.superclass.constructor.call(this); |
006 | this.loadData(); |
007 | }; |
008 | Ext.extend(system.PagingGridPanel, Ext.Panel, { |
009 | initUIComponents : function() { |
010 | // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW |
011 | this.store1 = new Ext.data.Store({ |
012 | proxy : new Ext.data.MemoryProxy({ |
013 | total : 2, |
014 | root : [{ |
015 | age : 56, |
016 | name : "IOyFo" |
017 | }, { |
018 | age : 239, |
019 | name : "87tPp" |
020 | }] |
021 | }), |
022 | reader : new Ext.data.JsonReader({ |
023 | root : "root", |
024 | total : "total", |
025 | id : "id" |
026 | }, [{ |
027 | mapping : "name", |
028 | name : "name" |
029 | }, { |
030 | type : "int", |
031 | mapping : "age", |
032 | name : "age" |
033 | }]) |
034 | }); |
035 |
036 | this.gridPanel1 = new Ext.grid.GridPanel({ |
037 | bbar : new Ext.PagingToolbar({ |
038 | xtype : "paging", |
039 | emptyMsg : "No data to display", |
040 | displayMsg : "Displaying {0} - {1} of {2}", |
041 | store : this.store1 |
042 | }), |
043 | selModel : new Ext.grid.RowSelectionModel({}), |
044 | columns : [{ |
045 | header : "name", |
046 | dataIndex : "name", |
047 | sortable : true, |
048 | hidden : false |
049 | }, { |
050 | header : "age", |
051 | dataIndex : "age", |
052 | sortable : true, |
053 | hidden : false |
054 | }], |
055 | store : this.store1, |
056 | height : 200, |
057 | tbar : new Ext.Toolbar([{ |
058 | handler : function(button, event) { |
059 | this.onButtonClick(button, event); |
060 | }.createDelegate(this), |
061 | text : "button" |
062 | }, { |
063 | handler : function(button, event) { |
064 | this.onButtonClick(button, event); |
065 | }.createDelegate(this), |
066 | text : "button2" |
067 | }]) |
068 | }); |
069 |
070 | Ext.apply(this, { |
071 | items : [this.gridPanel1] |
072 | }); |
073 | // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE |
074 | }, |
075 | loadData : function() { |
076 | this.store1.load(); |
077 | }, |
078 | onButtonClick : function(button, event) { |
079 | this.store1 = new Ext.data.Store({ |
080 | proxy : new Ext.data.MemoryProxy({ |
081 | total : 2, |
082 | root : [{ |
083 | age : 56, |
084 | name : "88888" |
085 | }, { |
086 | age : 239, |
087 | name : "99999" |
088 | }] |
089 | }), |
090 | reader : new Ext.data.JsonReader({ |
091 | root : "root", |
092 | total : "total", |
093 | id : "id" |
094 | }, [{ |
095 | mapping : "name", |
096 | name : "name" |
097 | }, { |
098 | type : "int", |
099 | mapping : "age", |
100 | name : "age" |
101 | }]) |
102 | }); |
103 | this.store1.reload(); |
104 | } |
105 | }); |
index.html
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
02 | <html xmlns="http://www.w3.org/1999/xhtml"> |
03 | <head> |
04 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
05 | <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script> |
06 | <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script> |
07 | <link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/> |
08 | <script type="text/javascript" src="PagingGridPanel.js"></script> |
09 | </head> |
10 | <body> |
11 | <script> |
12 | Ext.onReady(function() { |
13 | Ext.QuickTips.init(); |
14 | Ext.form.Field.prototype.msgTarget = 'side'; |
15 | var viewport = new Ext.Viewport( { |
16 | layout : 'fit', |
17 | border : false, |
18 | items : [new system.PagingGridPanel()] |
19 | }); |
20 | viewport.render(); |
21 | }); |
22 | </script> |
23 |
24 | </body> |
25 | </html> |
项目截图
运行截图
