我的ExtJS学习之路 ——2

接着上篇的说。

GridPanel是ExtJS最出色的组件，确实如此，在项目中用表格最多了。一个项目中有很多很多的表格。

而每一个表格都有一些重复性的操作，如配置项，store，分页，刷新等。

而写Ext一个原则是能少写代码，就少写。

代码少了，性能好点，也便于维护和修改。

下面的代码是就是 表格组件一些公用的东西，给封装一下，之后封装的类继承就可以了。。

Ext.namespace('Ext.cjl');
Ext.cjl.BaseGrid = Ext.extend(Ext.grid.GridPanel, {
    pageSize : 20,
    layout : 'fit',
    closable : true,
    loadMask : true,
    stripeRows : true,
    viewConfig : {
        forceFit : true
    },
    loadMask : {
        msg : '数据加载中.....'
    },
    closable : true,
    initComponent : function() {
        this.store = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                    url : this.baseUrl
                }),
                reader : new Ext.data.JsonReader({
                    totalProperty : 'rowCount',
                    root : 'result'
                }, this.record)
            });
        this.contextmenu = new Ext.menu.Menu({
            items : [{
                    text : '刷新',
                    handler: this.refresh.createDelegate(this)
                }]
        });
        this.bbar = new Ext.PagingToolbar({
            pageSize : this.pageSize,
            store : this.store,
            displayInfo : true,
            displayMsg :'显示第 {0} 条到 {1} 条，共 {2} 条',
            emptyMsg : '没有数据记录'
        });
        this.store.load({
            params : {
                start : 0,
                limit : this.pageSize
            }
        });
        this.on('contextmenu', function(e) {
            e.preventDefault();
            this.contextmenu.showAt(e.getXY());
        });
        Ext.cjl.BaseGrid.superclass.initComponent.call(this);
    },
    getSelectedRecord : function() {
        var s = this.getSelectionModel().getSelections();
        if (s.length == 0) {
            return false;
        } else {
            return s;
        }
    },
    getSelectedIds : function() {
        var s = this.getSelectedRecord();
        if (s != false) {
            var ids = new Array();
            Ext.each(s, function(item) {
                ids.push(item.data.id);
            });
            return Ext.encode(ids);
        } 
        else
            return false;
    },
    refresh : function() {
        this.store.removeAll();
        this.store.reload();
    }
});

封装父类后，再实现一个GridPanel，就简单多了，代码量会少很多。

只需要写 上工具条，列，读取参数，一些操作的方法。

如下：

Ext.namespace('Ext.cjl');
//封装表格
Ext.cjl.TestGrid = Ext.extend(Ext.cjl.BaseGrid, {
    id:'testgrid',
    title : '测试封装表格',
    baseUrl : 'temp/test.txt',
    initComponent : function() {
        this.sm = new Ext.grid.CheckboxSelectionModel();
        this.cm = new Ext.grid.ColumnModel([this.sm, {
                header : 'ID编号',
                dataIndex : 'id'
            },{
                header : '姓名',
                dataIndex : 'name'
            },{
                header : '年龄',
                dataIndex : 'age'
            },{
                header:'联系电话',
                dataIndex:'tel'
            }]);
        this.record = Ext.data.Record.create([{
                name : 'id',
                type : 'int'
            }, {
                name : 'name',
                type : 'string'
            }, {
                name : 'age',
                type : 'int'
            }, {
                name : 'tel',
                type : 'string'
            }]);
        this.tbar = new Ext.Toolbar([{
                text : '刷新',
                handler : this.refresh.createDelegate(this)
            },{
                text : '新建',
                handler : this.add.createDelegate(this)
            },{
                text : '修改',
                handler : this.edit.createDelegate(this)
            },{
                text : '删除',
                handler : this.deleteOp.createDelegate(this),
                //控制按钮的显示，实现前台的权限控制
                hidden:true
            }]);
        Ext.cjl.TestGrid.superclass.initComponent.call(this);
    },
    add : function(){
        alert('添加');
    },
    edit : function(){
        alert('修改');
    },
    deleteOp : function(){
        var ids=this.getSelectedIds();
        if(ids==false){
            Ext.Msg.alert('系统提示','请选择一行或多行进行操作！');
            return;
        }
        alert(ids);
    }
});
Ext.reg('testgrid',Ext.cjl.TestGrid);

在html中，注意引入封装的js

html中代码和上一篇的一样，不变

<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var tempGrid=new Ext.cjl.TestGrid();
    var win = new Ext.Window({
         title: '封装Grid',
         layout: 'fit',
         width: 800,
         height: 400,
         maximizable : true,
         resizable : false,
         closable: false,
         items:[tempGrid]
    });
    win.show();
});
</script>

页面效果也和上篇的一样。