EXTJS入门教程及其框架搭建

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>

项目截图

运行截图