ExtJS初体验

wblearn

发布于 2018-08-27 17:41:28

2.1K0

发布于 2018-08-27 17:41:28

文章被收录于专栏：wblearn

最近公司的一个系统有用到Extjs框架，对于之前完全用JQuery的js插件的我来说，对Extjs的api并不熟悉。extjs是个富客户端框架，一般用来做后台管理系统，封装了非常多的控件，很庞大，很复杂，学习门槛高。jquery是一个前后台都可以用的框架，是对js的封装，js轻量级框架。没有封装任何控件，学习曲线小，程序员和前端必须要掌握的。这两天体验了一下，如图：

其中字典类型组件代码：

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 : '编号',  
            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);//新增时默认为-1，空字符会报错  
                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("请先选择一个数据字典！");  
                        return;  
                    }

当我们在左侧点击编号为3的选择框时，会通过ajax方式从后台取数据显示在右侧维度字典列表组件中，如图

通过ajax取数据的代码，返回的数据是json形式的：

//数据字典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组件，大大缩短了我们的开发周期，而且组件拥有漂亮的布局，经过简单的调用与配置就可以实现不错的界面布局。ExtJS提供的各种组件可以用更加标准的方式展示数据降低了开发难度。

继续演示ExtJS给我们带来的便利，当我们在右侧点击新增时，要求数据字典的值必须为值，否则弹框提醒用户，由于Extjs的特点只需加两句代码就可以搞定，如下代码中的标记处1和标记处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]*$/, （标记处1）
           regexText : '亲,请输入数字好吗？',</span>    (标记处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%'  
        }]  
    });

是不是感觉很简单，来看下效果：