EXTJS入门教程及其框架搭建

原文：EXTJS入门教程及其框架搭建

源代码下载地址：http://www.zuidaima.com/share/1724474768788480.htm

EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。

首先是为每一个页面定义一个类，再以EXTJS的规范格式增加所需的元素，可以使用所见所得的工具： extbuilder 来操作，这个类将以XXXXX.js的文件名保存，最后在相应的HTML页面中引入相关的JS和CSS文件：

 <script type=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script>  <script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script>  <link rel=" stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " />  <script type=" text/javascript " src= "XXXXX.js "></script> 

并在BODY中加入下面这段JAVA SCRIPT：

<script> Ext.onReady( function () { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget='side'; var viewport=new Ext.Viewport( { layout : 'fit', border : false, items : [new system.XXXXX()] }); viewport.render(); }); </script> 

其中XXXXX就是之前新加的JS类，则EXT引擎就会以一定的非常漂亮的样式渲染出页面来，并且以后的页面风格要改变，只须更换CSS即可，无须改动页面。

附完整的代码：
PagingGridPanel.js

Ext.namespace('system');system.PagingGridPanel = function(config) {    Ext.applyIf(this, config);    this.initUIComponents();    system.PagingGridPanel.superclass.constructor.call(this);    this.loadData();};Ext.extend(system.PagingGridPanel, Ext.Panel, {    initUIComponents : function() {        // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW        this.store1 = new Ext.data.Store({            proxy : new Ext.data.MemoryProxy({                total : 2,                root : [{                    age : 56,                    name : "IOyFo"                }, {                    age : 239,                    name : "87tPp"                }]            }),            reader : new Ext.data.JsonReader({                root : "root",                total : "total",                id : "id"            }, [{                mapping : "name",                name : "name"            }, {                type : "int",                mapping : "age",                name : "age"            }])        });        this.gridPanel1 = new Ext.grid.GridPanel({            bbar : new Ext.PagingToolbar({                xtype : "paging",                emptyMsg : "No data to display",                displayMsg : "Displaying {0} - {1} of {2}",                store : this.store1            }),            selModel : new Ext.grid.RowSelectionModel({}),            columns : [{                header : "name",                dataIndex : "name",                sortable : true,                hidden : false            }, {                header : "age",                dataIndex : "age",                sortable : true,                hidden : false            }],            store : this.store1,            height : 200,            tbar : new Ext.Toolbar([{                handler : function(button, event) {                    this.onButtonClick(button, event);                }.createDelegate(this),                text : "button"            }, {                handler : function(button, event) {                    this.onButtonClick(button, event);                }.createDelegate(this),                text : "button2"            }])        });        Ext.apply(this, {            items : [this.gridPanel1]        });        // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE    },    loadData : function() {        this.store1.load();    },    onButtonClick : function(button, event) {        this.store1 = new Ext.data.Store({            proxy : new Ext.data.MemoryProxy({                total : 2,                root : [{                    age : 56,                    name : "88888"                }, {                    age : 239,                    name : "99999"                }]            }),            reader : new Ext.data.JsonReader({                root : "root",                total : "total",                id : "id"            }, [{                mapping : "name",                name : "name"            }, {                type : "int",                mapping : "age",                name : "age"            }])        });        this.store1.reload();    }});

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  <script src="http://cdn.bootcss.com/extjs/3.4.1-1/adapter/ext/ext-base.js"></script> <script src="http://cdn.bootcss.com/extjs/3.4.1-1/ext-all-debug.js"></script><link href="http://cdn.bootcss.com/extjs/3.4.1-1/resources/css/ext-all.css" rel="stylesheet"/> <script type="text/javascript" src="PagingGridPanel.js"></script></head><body><script>    Ext.onReady(function() {        Ext.QuickTips.init();        Ext.form.Field.prototype.msgTarget = 'side';        var viewport = new Ext.Viewport( {            layout : 'fit',            border : false,            items : [new system.PagingGridPanel()]        });        viewport.render();    });</script></body></html>

项目截图

运行截图