带十字展开的GridForm

今天用到了带分组的GridForm，第一次接触，参考了一下Ext自带的例子，不算太难，用到的关键点摘要的写在了下面，

最深的一点体会是，官方例子用的都是Arrydata，无论参考哪个例子，搞明白需要加载的数据的结构，然后控制后台生成，

就可以套用了。先写这么多吧，下面的例子有些乱，对不住了！

 

//数据
     this.store = new Ext.data.GroupingStore({
      proxy  : new Ext.data.HttpProxy({url: 获取数据的action方法}),
      reader : new Ext.data.JsonReader(
        {
         id: 'id',
         root: 'data',
         totalProperty : "totalCounts",   
      fields : [
      {name:'reportNum',mapping: 'reportNum'},
      {name:'projectName',mapping: 'projectName'}
          ]
        }
           ),
   sortInfo:{field: 'id', direction: "desc"},    //索引数据
   groupField:'projectName',  //组名称

   remoteSort : true
     });
     this.store.load({
           params : {
      start : 0,
      limit : 10
      }
     });
     this.store.setDefaultSort("id", "desc");  //初始化时的索引排序

 

this.topbar = new Ext.Toolbar({
   height : 30,
   items : []
        }); 

 

this.gridPanel = new Ext.grid.GridPanel({
     id : "",
    region : "left",
   defaultType : "textfield",
   baseCls:"x-plain",
   autoWidth : true,
   autoHeight : true,
   tbar : this.topbar,
   closable : true,
   store : this.store,
   trackMouseOver : true,
   disableSelection : true,  
   cm : a,
   sm : c, 
   

//这是设置分组
  view: new Ext.grid.GroupingView({
               forceFit:true,
               groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Item" : "Items"]})'
               }),

   viewConfig : {
   forceFit : false,
   enableRowBody : false,
   showPreview : false
      },
    bbar : new Ext.PagingToolbar({
    pageSize : 10,
    store : this.store,
    displayInfo : true,
    displayMsg : "当前显示从{0}至{1}条记录， 共{2}条项目记录",
    emptyMsg : "当前没有记录"
   })
     
     });
    }
   
});