自己封装的Extjs组件GroupGrid的代码（1） GroupGrid.js

由于代码空格太多，一篇发不完分成两段发上来。

---

GroupGrid.js 代码段（1）

Ext.namespace("Ext.tet");
Ext.tet.GroupGrid=Ext.extend(Ext.grid.GridPanel , {  
             //=====================================自定义属性结束============================
             ajaxUrl:"/ExtProject/pagination/pagination.ashx",
             chartUrl:"/ExtProject/pagination/statisChart.ashx",
             excelUrl:"/ExtProject/pagination/toExcel.aspx",
             pageSize:20,
             //DataSourceParams:{tableName:null,key:null,query:null,search:null,where:null,groupBy:null,orderBy:null,direction:"Desc"},
             excelTitle:"数据导出",
             excelButton:true,
             chartButton:true,
             queryButton:true,
             loadStore:true,
             singleSelect:true,
             //=====================================设置默认缺省属性==========================
             loadMask:true,
             loadMask:{msg:"数据正在加载中...."},      
          autoScroll:true,
          border:false,
          columnLines:true,
          //height:function(){var de = document.documentElement, bd = document.body; return ((de && de.offsetHeight) || bd.offsetHeight);}(),
          //width:function(){var de = document.documentElement, bd = document.body; return ((de && de.offsetWidth) || bd.offsetWidth);}(),
             viewConfig: new Ext.grid.GroupingView({ 
                forceFit:false,
                sortAscText :'正序排列',
                sortDescText :'倒序排列',
                columnsText:'列显示/隐藏',
                groupByText:'根据本列分组',
                showGroupsText:'是否分组显示',
                groupTextTpl: '{text} (<b><font color=red>{[values.rs.length]}</font> </b>{[values.rs.length > 0 ? "条信息" : "暂无信息"]})',
             enableRowBody:true,
             hideGroupedColumn:true,
             getRowClass:function(record,rowIndex,p,ds){                           
                               //if(rowIndex==0) return "x-grid3-row-selected"; //默认选种第一行
                               if(rowIndex%2==0)
                                     return "AlternatingRowStyle";
                               else  return "RowStyle";
             }
             }),
             //====================================自定定义函数================================
             setHeight:function(){
                   if(!this.height) this.height=window.screen.availHeight-110;
             },         
             getColumnField:function(){                 
                  var columns =this.cm.getColumnsBy(function(c){
                                                      if(c.dataIndex=="") return false;   //去掉单选列
                                                      return true;
                                                   });                               
                  var field=[];     
                  var excelSql=[]      
                  Ext.each(columns,function(){                     
                      field.push(this.dataIndex);
                      excelSql.push(this.dataIndex+" as "+this.header);
                  });      
                  this.excelSql=excelSql.join(",");          
                  return field;
             },
             getStoreField:function(){
                  if(this.storeField) return this.storeField;
                  var columns =this.cm.getColumnsBy(function(c){
                                                       if(c.dataIndex=="") return false;   //去掉单选列
                                                       return true;
                                                   }); 
                  var field=[];
                  var object;
                  Ext.each(columns,function(){                     
                      object={name:this.dataIndex,type:"string",header:this.header};
                      if(this.attribute&&this.attribute.type)
                             object["type"]=this.attribute.type;
                      if(this.attribute&&this.attribute.dateFormat)
                             object["dateFormat"]=this.attribute.dateFormat;
                      field.push(object);
                      object=null;
                  });   
                  this.storeField=field;            
                  return this.storeField;
             },
             getSearchColumns:function(){
                  return this.cm.getColumnsBy(function(c){
                                                      if(!c.searchable) return false;  //去掉不需要查询的列
                                                      else if(!c.searchable) return false;                                                     
                                                      return true;
                                              });
             },
             createRowSelectionModel:function(){
                 if(!this.sm) this.sm = new Ext.grid.RowSelectionModel({singleSelect:this.singleSelect});   
             },         
             createStore:function(){
                 if(this.store) return ;
                 var __pageSize=this.pageSize||10000;
                 var __fields=this.getStoreField();                                 
                 var __url= this.ajaxUrl;
                 var __key= this.DataSourceParams["key"];
                 var __groupBy=this.DataSourceParams["groupBy"];
                 var __orderBy=this.DataSourceParams["orderBy"];
                 var __direction=this.DataSourceParams["direction"].toUpperCase();
                 var __baseParams=Ext.apply({start:0,limit:__pageSize,columns:this.getColumnField().join(",")},this.DataSourceParams);
                    this.store =new Ext.data.GroupingStore({
                           proxy:new Ext.data.HttpProxy(
                           {
                                url:this.ajaxUrl,
                                method:"POST"
                           }),
                           reader:new Ext.data.JsonReader(
                           {
                                fields:__fields,
                                root:"data",
                                idProperty:__key,
                                totalProperty:"totalCount"                      
                           }),
                           listeners:{
                                        //scope:this,
                                        //"datachanged":function(){
                                        //             this.getSelectionModel().selectFirstRow();
                                        //},
                                        "beforeload":function(ds,option){
                                                            if(ds.baseParams["query"]!=null||ds.baseParams["query"]==""){
                                                                ds.baseParams["where"]=ds.baseParams["search"]+" like '%" + ds.baseParams["query"] + "%'";
                                                                ds.baseParams["query"]=null;
                                                            }
                                                     }
                           },      
                           baseParams:__baseParams,                         
                           remoteSort:true,                                    //后台排序
                           sortInfo: {field:__orderBy,direction:__direction},
                           groupOnSort:false,                                  //前台分组
                           groupField:__groupBy                                //前台分组[不想分组__groupBy=""即可]
                    });
                    if(this.loadStore) this.store.load();
             },
             selectFirstRow:function(){
                   this.getSelectionModel().selectFirstRow();
             },
             createBbar:function(){
                    if(this.bbar||!this.pageSize) return ;
                    this.pagesize_combo = new Ext.form.ComboBox({   
                         store:new Ext.data.SimpleStore({
                          fields:["text","value"],
                          data:[["10","10"],["15","15"],["20","20"],["30","30"],["50","50"]]
                         }),   
                         width:50,   
                         readOnly:true,   
                         emptyText: '20',   
                         mode:"local",    
                         triggerAction: 'all',   
                         valueField: 'value',   
                         displayField: 'text',
                         valueNotFoundText:this.pageSize  
                    });
                    this.pagesize_combo.setValue(this.pageSize);
                    this.bbar=new Ext.PagingToolbar({
                           store:this.store,
                           pageSize:this.pageSize,
                           displayInfo:true,
                           displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
                              emptyMsg:"没有数据",
                              prevText:"上一页",
                           nextText:"下一页",
                           refreshText:"刷新",
                           lastText:"最后页",
                           firstText:"第一页",
                           beforePageText:"当前页",
                           afterPageText:"共{0}页",
                           items:[
                                 "","-",
                                 '&nbsp;&nbsp;每页记录数：',
                                 this.pagesize_combo,"-",
                                 {text:"导出",iconCls:"excelicon",hidden:!this.excelButton,listeners:{
                                                                               scope:this,
                                                                               "click":function(){                                              
                                                                                    var oiframe=Ext.getDom("gridview_Excelfram");
                                                                                    if(!oiframe){
                                                                                        var oiframe=document.createElement("IFRAME");
                                                                                        oiframe.id="gridview_Excelfram";
                                                                                        oiframe.style.display="none";                                                                                       
                                                                                        window.document.body.appendChild(oiframe);                        
                                                                                    }
                                                                                    oiframe.src=this.excelUrl+"?excelSql="+encodeURIComponent(this.excelSql)+"&excelTitle="+encodeURIComponent(this.excelTitle)+"&tableName="+encodeURIComponent(this.store.baseParams["tableName"])+"&where="+encodeURIComponent(this.store.baseParams["where"])+"&sort="+this.store.sortInfo.field+"&dir="+this.store.sortInfo.direction;
                                                                               }
                                 }},"-",
                                 {text:"统计",iconCls:"charticon",hidden:!this.chartButton,
                                                  listeners:{
                                                  scope:this,
                                                  "click":function(){
                                                           this.chartWindow.show();
                                                  }
                                 }},"-"                                
                           ]  
                    });
                    this.pagesize_combo.on("select",function(comboBox){
                            this.getBottomToolbar().pageSize= parseInt(comboBox.getValue());
                            this.store.baseParams["limit"]=this.getBottomToolbar().pageSize;
                            this.store.reload({params:{start:0}});
                    },this);  
             },