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>

 

运行效果截图如下：