EXTJS入门教程及其框架搭建

来源：互联网发布：模拟量数据采集模块编辑：程序博客网时间：2024/06/06 19:45

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

001Ext.namespace('system');
002system.PagingGridPanel = function(config) {
003    Ext.applyIf(this, config);
004    this.initUIComponents();
005    system.PagingGridPanel.superclass.constructor.call(this);
006    this.loadData();
007};
008Ext.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>

项目截图

运行截图

4 3