最近公司的一個(gè)系統(tǒng)有用到Extjs框架，對于之前完全用JQuery的js插件的我來說，對Extjs的api并不熟悉。extjs是個(gè)富客戶端框架，一般用來做后臺(tái)管理系統(tǒng)，封裝了非常多的控件，很龐大，很復(fù)雜，學(xué)習(xí)門檻高。jquery是一個(gè)前后臺(tái)都可以用的框架，是對js的封裝，js輕量級(jí)框架。沒有封裝任何控件，學(xué)習(xí)曲線小，程序員和前端必須要掌握的。
這兩天體驗(yàn)了一下，如圖：

其中字典類型組件代碼：

var group_grid = Ext.create('Ext.grid.Panel', {  
        title:'字典類型列表',  
        region:'west',  
        width:'50%',  
        columnLines : true,  
        striped : true,  
        store : group_store,  
        selModel:group_selModel,  
        columns : [ {  
            xtype : 'rownumberer'  
        }, {  
            text : '編號(hào)',  
            dataIndex : 'dim_id',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }, {  
            text : '名稱',  
            dataIndex : 'dim_name',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }, {  
            text : '描述',  
            dataIndex : 'dim_description',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }],  
        bbar : Ext.create('Ext.PagingToolbar', {  
            store : group_store,  
            displayInfo : true  
        }),  
        tbar: [{  
            text: '新增',  
            handler: function() {  
                Ext.getCmp('group_add').show();  
                Ext.getCmp('group_edit').hide();  
                group_win.setTitle('新增字典類型');  
                group_Form.form.reset();  
                Ext.getCmp('group_dim_id').setValue(-1);//新增時(shí)默認(rèn)為-1，空字符會(huì)報(bào)錯(cuò)  
                group_win.show();  
            }  
        },{  
            text: '修改',  
            handler: function() {  
                var selections = group_selModel.getSelection();  
                if (selections.length == 0) {  
                    showWarningMsg("請先選擇一條記錄！");  
                    return;  
                }  
                group_Form.loadRecord(selections[0]);  
                Ext.getCmp('group_add').hide();  
                Ext.getCmp('group_edit').show();  
                group_win.setTitle('修改字典類型');  
                group_win.show();  
            }  
        },{  
                text: '刪除',  
                handler: function() {  
                    var selections = group_selModel.getSelection();  
                    if (selections.length == 0) {  
                        showWarningMsg("請先選擇一個(gè)數(shù)據(jù)字典！");  
                        return;  
                    }  

當(dāng)我們在左側(cè)點(diǎn)擊編號(hào)為3的選擇框時(shí)，會(huì)通過ajax方式從后臺(tái)取數(shù)據(jù)顯示在右側(cè)維度字典列表組件中，如圖

通過ajax取數(shù)據(jù)的代碼，返回的數(shù)據(jù)是json形式的：

//數(shù)據(jù)字典store  
    var items_store = Ext.create('Ext.data.Store', {  
        fields:['sor_id', 'sor_name', 'sor_state','sor_attr', 'sor_description', 'sor_loadtime'],  
        proxy : {  
            type : 'ajax',  
            url : ctx + '/data/getItemsByTableName.do',  
            reader : {  
                type : 'json',  
                totalProperty : 'totalCount',  
                root : 'data'  
            }  
        }  
    });  

從上面的例子可以看到ExtJs框架非常的組件化，Ext JS庫有著豐富且漂亮的UI組件，大大縮短了我們的開發(fā)周期，而且組件擁有漂亮的布局，經(jīng)過簡單的調(diào)用與配置就可以實(shí)現(xiàn)不錯(cuò)的界面布局。ExtJS提供的各種組件可以用更加標(biāo)準(zhǔn)的方式展示數(shù)據(jù)降低了開發(fā)難度。

繼續(xù)演示ExtJS給我們帶來的便利，當(dāng)我們在右側(cè)點(diǎn)擊新增時(shí)，要求數(shù)據(jù)字典的值必須為值，否則彈框提醒用戶，由于Extjs的特點(diǎn)只需加兩句代碼就可以搞定，如下代碼中的標(biāo)記處1和標(biāo)記處2，

//字典類型添加、修改表單  
    var item_Form = Ext.create('Ext.form.Panel', {  
        width : 400,  
        height : 200,  
        frame : true,  
        layout:'anchor',  
        labelWidth:60,  
        items: [{  
            xtype : 'hiddenfield',  
            id:'sor_id',  
            name : 'sor_id',  
            anchor:'90%'  
        },  
        {  
            xtype : 'hiddenfield',  
            id:'dim_id',  
            name : 'dim_id',  
            anchor:'90%'  
        },  
            {  
            xtype : 'textfield',  
            id:'dim_name',  
            name : 'dim_name',  
            fieldLabel:'表名',  
            enabled:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_name',  
            name : 'sor_name',  
            fieldLabel:'名稱',  
            allowBlank:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_state',  
            name : 'sor_state',  
            fieldLabel:'值',<span style="font-size:14px;color:#ff0000;">  
           regex: /^[0-9]*$/, （標(biāo)記處1）
           regexText : '親,請輸入數(shù)字好嗎？',</span>    (標(biāo)記處2)
            allowBlank:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_attr',  
            name : 'sor_attr',  
            fieldLabel:'屬性',  
            allowBlank:true,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_description',  
            name : 'sor_description',  
            fieldLabel:'描述',  
            allowBlank:true,  
            anchor:'90%'  
        }]  
    });  

是不是感覺很簡單，來看下效果：