EXT的grid擴展

在javaeye裏面，看到了一篇非常不錯的文章，主要介紹了EXT中的GridPanel的擴展，具體鏈接地址如下

http://www.javaeye.com/topic/155455
看完迫不及待的做了個demo的確好用，攢一下那位兄弟。

其實擴展組件主要有2種寫法：

MyClass = Ext.extend(SuperClass, { /* */ });
Ext.extend(MyClass, SuperClass, { /* */});

例子(採用第一種寫法)完整的js代碼如下：

 

 Ext.namespace("Ext.ux.grid");  
 Ext.ux.grid.SimpleGrid = Ext.extend(Ext.grid.GridPanel, {  
        // 表格結構  
        structure : '',  
        // 獲取數據的URL  
        url : '',  
        // 默認排序字段  
        defaultSortField : '',  
        // 關鍵字段  
        keyField : '',  
        // 是否需要額外的過濾條件，默認爲空  
        externalFilters : '',  
        // 是否需要分頁工具欄，默認爲true 
        needPage : true,   
        frame : true,   
        collapsible : true,   
        animCollapse : true,   
        loadMask : true,   
 
        viewConfig : {  
            forceFit : true 
        },  
 
        // private  
        initComponent : function() {  
            if (this.structure != '') {  
                this.initStructure();  
            }  
 
            Ext.ux.grid.SimpleGrid.superclass.initComponent.call(this);  
 
            if (!this.selModel) {  
                new Ext.grid.RowSelectionModel( {  
                    singleSelect : true 
                });  
            }  
        },  
 
        // private  
        initEvents : function() {  
            Ext.grid.GridPanel.superclass.initEvents.call(this);  
 
            this.getStore().load( {  
                params : {  
                    start : 0,  
                    limit : 20  
                }  
            });  
 
            if (this.loadMask) {  
                this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {  
                    store : this.store  
                }, this.loadMask));  
            }  
        },  
 
        // private  
        initStructure : function() {  
            var oCM = new Array();  
            var oRecord = new Array();  
            // 構成grid的三個組件: filters,column和record，根據structure將這三個組件創建出來  
            for (var i = 0, len = this.structure.length;i < len; i++) {  
                var c = this.structure[i];  
                // 如果字段爲hidden，則不生成filters和columnMode  
                if (c.hidden == undefined || !c.hidden) {  
                    oCM[oCM.length] = {  
                        header : c.header,  
                        dataIndex : c.name,  
                        width : c.width,  
                        // 類型爲數字則右對齊  
                        align : c.type == 'numeric' ? 'right' : 'left',  
                        // 類型爲日期則生成格式爲xxxx-xx-xx  
                        renderer : c.type == 'date' 
                                ? Ext.util.Format.dateRenderer('Y-m-d')  
                                : Ext.grid.ColumnModel.defaultRenderer  
                    };  
                }  
                oRecord[oRecord.length] = {  
                    name : c.name,  
                    // 如果類型不是date型則全部爲string型  
                    type : c.type == 'date' ? 'date' : 'string' 
                };  
            }  
            // 生成columnModel  
            this.cm = new Ext.grid.ColumnModel(oCM);  
            this.colModel = this.cm;  
            // 默認可排序  
            this.cm.defaultSortable = true;  
 
           //var filters = new Ext.ux.grid.GridFilters(oFilters);  
            // 生成表格數據容器  
            var record = Ext.data.Record.create(oRecord);  
            var reader = new Ext.data.JsonReader( {  
                totalProperty : "totalCount",  
                root : "result",  
                id : this.keyField  
            }, record);  
            this.ds = new Ext.data.Store( {  
                proxy : new Ext.data.HttpProxy( {  
                    url : this.url  
                }),  
                reader : reader,  
                sortInfo : {  
                    field : this.defaultSortField,  
                    direction : 'ASC' 
                },  
                remoteSort : true 
            });  
            this.store = this.ds;  
            // 生成分頁工具欄  
            if (this.needPage) {  
                var pagingToolbar = new Ext.PagingToolbar( {  
                    displayInfo : true,  
                    displayMsg : '當前記錄數: {0} - {1} 總記錄數: {2}',  
                    emptyMsg : '沒有符合條件的記錄',  
                    store : this.ds
                });  
                pagingToolbar.pageSize = 30;  
                this.bbar = pagingToolbar;  
                this.bottomToolbar = this.bbar;  
            }  
        }  
    });  
Ext.reg('simpleGrid', Ext.ux.grid.SimpleGrid); 

這個代碼可以單獨作爲一個文件Ext.ux.grid.MyCustomGrid.js在html引入。

 

調用的test.js代碼:

 

Ext.onReady(function(){
 
  var structure = [ {  
   name : 'basicUnitNo',  
   header : "No.",  
   width : 50  
  }, {  
   name : 'basicUnitName',  
   header : "基本單位名稱",  
   width : 130  
  },{  
   name : 'test',  
   header : "No1",  
   hidden:true,
   width : 50  
  }];  
  
 var grid = new Ext.ux.grid.SimpleGrid( {  
  id : 'basicUnitList-grid',  
  url : 'getBasicUnits.action',  
  defaultSortField : 'basicUnitNo',  
  keyField : 'basicUnitNo',  
  structure: structure,  
  //el : 'listForm',  
  width : 1000,  
  height : 500,  
  title : '基本單位列表' 
 });  

 var viewPort = new Ext.Viewport({
      layout: 'border',
      items: [grid]
 });

});

 

test.html文件關鍵內容：

  <script type="text/javascript" src="Ext.ux.grid.MyCustomGrid.js"></script>
 <script type="text/javascript" src="test.js"></script>

 

運行效果截圖如下：