学步园

封装一个动态grid 继承Ext.grid.GridPanel
1.一般只需定义gridcolumns属性即可动态生成grid ，支持各列renderer自定义，
支持store自定义. 其中默认的store,用的是dwrproxy,dwr函数前三个默认参数为(qname,start,pagesize)其他参数在这三个参数之后，
通过DWRfuncParams属性传入。
2.需dwr。
约定:root为data, totalProperty为totalSize

Js代码

1. Ext.namespace("Ext.ux.grid");   
2. /**  
3.  * @class Ext.ux.grid.DynamicGridPanel  
4.  * @extends Ext.grid.GridPanel  
5.  * @author  wujuncheng  
6.  * @constructor  
7.  * @param {Object} config A configuration object.  
8.  */  
9.     
10.  /**  
11.   * demo:  
12.   * var demoManage = {  
13.       
14.    return {  
15.     init1:function(){  
16.         //grid 列表头及列表头属性，用于数据映射和表头相关属性定义  
17.         var gridcolumns =[  
18.           {dataIndex: 'arArticleId', header:'arArticleId1',width:200,hidden:false,renderer:demoManage.toArticleRenderer},  
19.           {dataIndex: 'arShort',header:'arShort2',width:200,hidden:false},  
20.           {dataIndex: 'arIscommend', header:'arIscommend3',width:200,hidden:false},       
21.           {dataIndex: 'arIshot',header:'arIshot4',width:200,hidden:false},    
22.           {dataIndex: 'arIstop',header:'arIstop5',width:200,hidden:false},  
23.           {dataIndex: 'arHits',header:'arHits6',width:200,hidden:false},  
24.           {dataIndex: 'arStatus',header:'arStatus7',width:200,hidden:false},  
25.           {dataIndex: 'arCreatetime',header:'arCreatetime8',width:200,hidden:false}  
26.        ]  
27.        //grid 的配置属性 大部分属性按默认即可，一般只需定义gridcolumns属性  
28.        this.datagrid = new Ext.ux.grid.DynamicGridPanel({  
29. //          store:this.store(), //自定store 用法  
30.           gridcolumns:gridcolumns,  
31.           DWRfuncParams:[],  
32.           DWRfunc:demoManageAction.getArticles  
33.        });  
34.        this.datagrid.loadData();  
35.       },  
36.   toArticle:function (articleId){  
37.       var url = "articleUpdate.jsp?arArticleId="+articleId;  
38.       window.location.href=url;  
39.   },  
40.   toArticleRenderer:function (articleId){  
41.         return "<a href='#' class='' onclick='demoManage.toArticle(\""+articleId+"\")'>修改</a>"  
42.         
43.   },  
44.   store:function(){  
45.       storepage = this;  
46.       return new Ext.data.GroupingStore({         
47.            proxy:new Ext.cheping.data.DWRProxy({  
48.                         dwrFunction: this.Action.getArticles,  
49.                         listeners: {  
50.                             'beforeload': function(dataProxy, params){  
51. //                          storepage.storeParams = storepage.setStoreParams(params.start);  
52.                             var loadArgs = [  
53.                                 params.query,  
54.                                 params.start,  
55.                                 storepage.defaultPageSize,  
56.                            ];  
57.                            params[dataProxy.loadArgsKey] = loadArgs;      
58.                            }  
59.                     }  
60.         })  
61.        sortInfo:{field: 'fielname', direction: "ASC"}, //使用GroupingStore时必须指定sortInfo信息  
62.       });  
63.     },  
64.   };  
65.   }  
66.   */  
67.   
68.  Ext.ux.grid.DynamicGridPanel=Ext.extend(Ext.grid.GridPanel, {   
69.     enableChecked:true, //是否有CheckBox。   
70.     singleSelect: true,   
71.     width:'auto',   
72.     height:document.body.clientHeight, //高度   
73.     iconCls :'icon-grid',   
74.     stripeRows: true,   
75.     collapsible: true,   
76.     loadMask: true,   
77.     animCollapse: false,   
78.     DWRfuncParams:[],   
79.     DynamicGridPanel_fields:[],   
80.     DynamicGridPanel_columns:[],   
81.     hiddenDefaultTbar:true,   
82.     GroupingViewConfig:{   
83.       markDirty: false,    
84.       forceFit:false,   
85.       sortAscText :'正序',   
86.       sortDescText :'倒序',   
87.       columnsText:'列显示/隐藏',   
88.       groupByText:'依本列分组',   
89.       showGroupsText:'分组显示',   
90.       groupTextTpl: '{text} ({[values.rs.length]} 条记录)'  
91.       },   
92.            
93.     //private      
94.     initComponent: function(){   
95.         this.initDynamicGridPanelFields();   
96.         this.initDynamicGridPanelStore();   
97.         this.DynamicGridPanel_bbar();   
98.         Ext.ux.grid.DynamicGridPanel.superclass.initComponent.call(this);   
99.         this.iniDynamicGridPanelGrid();   
100.         this.initDynamicGridPanel_cm_tbr();   
101.         this.view= new Ext.grid.GroupingView(this.GroupingViewConfig)   
102.     },   
103.     pagingConfig:{       
104.         pageSize:20,                       
105.         store: this.store,              
106.         displayInfo:true,   
107.         plugins: [new Ext.ux.PageSizePlugin()],   
108.         displayMsg: "当前记录:{0} - {1} 条  总共{2} 条",   
109.         emptyMsg: "<b>0</b> 条记录"  
110.     },   
111.     //private   
112.     iniDynamicGridPanelGrid:function(){   
113.         this.DynamicGridPanelstoreParams = this.setDynamicGridPanelStoreParams(0);   
114.         if(this.container){   
115.             this.width = Ext.get(this.container).getComputedWidth(); //宽度   
116.             this.renderTo=Ext.get(this.container);   
117.         }   
118.     },   
119.     //private   
120.     initDynamicGridPanelStore:function(){   
121.         if(this.store){   
122.             this.store.reader=this.DynamicGridPanel_reader();   
123.         }else{   
124.             this.store= this.DynamicGridPanel_store();   
125.         }   
126.         this.pagingConfig.store = this.store;    
127.         this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});      
128.     },   
129.     //private   
130.     initDynamicGridPanel_cm_tbr:function(){   
131.         if(!this.cm)   
132.             if(!this.colModel)    
133.                 this.colModel=this.DynamicGridPanel_cm();   
134.           
135.         if(!this.hiddenDefaultTbar)   
136.           this.tbar=this.DynamicGridPanel_ToolBar();   
137.     },   
138.        
139.     setDynamicGridPanelStoreParams:function(start){   
140.             var Params = { params: { start:start} };   
141.             return Params;   
142.     },   
143.     //private   
144.     initDynamicGridPanelFields:function(){   
145.         for (var i = 0; i < this.gridcolumns.length; i++) {   
146.                  this.DynamicGridPanel_fields.push({name:this.gridcolumns[i].dataIndex});   
147.                  this.DynamicGridPanel_columns.push(this.gridcolumns[i]);   
148.          }   
149.     },                
150.     //private   
151.     DynamicGridPanel_cm:function(){   
152.          if (this.enableChecked) {   
153.                      this.DynamicGridPanel_sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: this.singleSelect, moveEditorOnEnter: true, sortable: false });   
154.                      var arr = [this.DynamicGridPanel_sm];   
155.                      arr.push(new Ext.grid.RowNumberer({header:'序号',width:40}))   
156.                      var sunfish = this.DynamicGridPanel_columns;   
157.                      for (var i = 0; i < sunfish.length; i++) {   
158.                          arr.push(sunfish[i]);   
159.                      }   
160.                  }   
161.                  else {   
162.     //                 arr = eval('([' + this.columns + '])');   
163.                      arr = this.DynamicGridPanel_columns;   
164.                  }   
165.                  var col = new Ext.grid.ColumnModel(arr);   
166.                  col.defaultSortable = true;   
167.            return col;         
168.     },   
169.     //private       
170.     DynamicGridPanel_store:function(){   
171.          var DynamicGridPanelStoreParams = this;   
172.            return  new Ext.data.GroupingStore({       
173.                proxy:new Ext.cheping.data.DWRProxy({   
174.                             dwrFunction: DynamicGridPanelStoreParams.DWRfunc,   
175.                             listeners: {   
176.                                 'beforeload': function(dataProxy, params){   
177.                                 DynamicGridPanelStoreParams.DynamicGridPanelstoreParams = DynamicGridPanelStoreParams.setDynamicGridPanelStoreParams(params.start);   
178.                                 var loadArgs = [   
179.                                     params.qname,   
180.                                     params.start,   
181.                                     DynamicGridPanelStoreParams.pagingConfig.pageSize      
182.                                ];   
183.                                if(DynamicGridPanelStoreParams.DWRfuncParams.length>0){   
184.                                   for(var i=0;i<DynamicGridPanelStoreParams.DWRfuncParams.length;i++){   
185.                                     loadArgs[loadArgs.length]=DynamicGridPanelStoreParams.DWRfuncParams[i];   
186.                                   }   
187.                                }   
188.                                   
189.                                params[dataProxy.loadArgsKey] = loadArgs;      
190.                 
191.                                }   
192.                         }   
193.             }),   
194. //------------------------------------------------------------------------------------------------ //分组表所需       
195. //     groupField:this.DynamicGridPanel_fields[0],   
196. //     groupOnSort:true,   
197.        
198.      sortInfo:{field: this.gridcolumns[0].dataIndex, direction: "ASC"}, //使用GroupingStore时必须指定sortInfo信息   
199. //------------------------------------------------------------------------------------------------    
200.          reader:  this.DynamicGridPanel_reader()   
201.           });   
202.     },   
203.     //private   
204.     DynamicGridPanel_reader:function(){   
205.          return new Ext.data.JsonReader({   
206.                 totalProperty: "totalSize",   
207.                 root: "data",   
208.                 fields:this.DynamicGridPanel_fields   
209.                 });   
210.     },   
211.     //private       
212.     DynamicGridPanel_bbar:function(){   
213.         this.bbar = new Ext.PagingToolbar(this.pagingConfig);    
214.     },   
215.        
216.     DynamicGridPanel_ToolBar:function(){   
217.             
218.      return new Ext.Toolbar(   
219.          {     
220.             hidden:this.hiddenDefaultTbar,    
221.             items:[    
222.              '->','关键字: ',    
223.             this.DynamicGridPanel_Search()   
224.                 ]    
225.           }   
226.         );    
227.     },   
228.        
229.     DynamicGridPanel_Search:function(){   
230.            return srch = new Ext.app.SearchField({   
231.                     store: this.store,   
232.                     width:220,   
233.                     paramName : 'qname',   
234.                     Align:'right'  
235.                 });   
236.     },   
237.     loadData:function() {   
238.         this.getStore().load(this.DynamicGridPanelstoreParams);   
239.     },   
240.     getInsertRecord:function(){   
241.         var obj={};   
242.         for(var i=0;i<this.DynamicGridPanel_fields.length;i++){   
243.             obj[this.DynamicGridPanel_fields[i].name]=null;   
244.         }   
245.         var record = Ext.data.Record.create(this.DynamicGridPanel_fields);   
246.         var InsertRecord = new record(obj);   
247.         return InsertRecord;   
248.     },   
249.     getSelectionObjsByName:function(dataName) {   
250.         if(this.getSelectionModel().getCount()<1){   
251.             Ext.MessageBox.alert('提示', '请选择数据,可以是多选！');   
252.             return;                        
253.         }else{    
254.                
255.             var getSelectionRecordsrList=[];   
256.             for(var i=0; i<this.getSelectionModel().getSelections().length;i++){    
257.                 if(null!=this.getSelectionModel().getSelections()[i].data[dataName]    
258.                     && ""!=this.getSelectionModel().getSelections()[i].data[dataName].trim())   
259.                 getSelectionRecordsrList.push(this.getSelectionModel().getSelections()[i].data[dataName]);   
260.             }   
261.             return  getSelectionRecordsrList;   
262.         }   
263.     },   
264.        
265.     getSelectionObjByName:function(dataName) {   
266.         if(this.getSelectionModel().getCount()==1){                        
267.             return  this.getSelectionModel().getSelections()[0].data[dataName];   
268.         }else{    
269.             Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');   
270.             return;   
271.         }   
272.     },   
273.     getSelectedObj:function() {   
274.         if(this.getSelectionModel().getCount()==1){    
275.             return  this.getSelectionModel().getSelections()[0].data;   
276.         }else{    
277.             Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');   
278.             return;   
279.         }   
280.     },   
281.      getFormRecord:function() {   
282.         if(this.getSelectionModel().getCount()==1){    
283.             return  this.getSelectionModel().getSelections()[0];   
284.         }else{    
285.             Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');   
286.             return;   
287.         }   
288.     }   
289.   
290. });  

* @class Ext.ux.grid.DynamicGridPanel

* @extends Ext.grid.GridPanel

* @author wujuncheng

* @constructor

* @param {Object} config A configuration object.

*/

/**

* demo:

* var demoManage = {

return {

 init1:function(){

     //grid

    var gridcolumns =[

{dataIndex: 'arArticleId', header:'arArticleId1',width:200,hidden:false,renderer:demoManage.toArticleRenderer},

{dataIndex: 'arShort',header:'arShort2',width:200,hidden:false},

{dataIndex: 'arIscommend', header:'arIscommend3',width:200,hidden:false},    

{dataIndex: 'arIshot',header:'arIshot4',width:200,hidden:false}, 

{dataIndex: 'arIstop',header:'arIstop5',width:200,hidden:false},

{dataIndex: 'arHits',header:'arHits6',width:200,hidden:false},

{dataIndex: 'arStatus',header:'arStatus7',width:200,hidden:false},

{dataIndex: 'arCreatetime',header:'arCreatetime8',width:200,hidden:false}

]

//grid 属性

this.datagrid = new Ext.ux.grid.DynamicGridPanel({

store:this.store(), //用法

gridcolumns:gridcolumns,

DWRfuncParams:[],

DWRfunc:demoManageAction.getArticles

});

this.datagrid.loadData();

   },

toArticle:function (articleId){

var url = "articleUpdate.jsp?arArticleId="+articleId;

window.location.href=url;

},

toArticleRenderer:function (articleId){

 return "<a href='#' class='' onclick='demoManage.toArticle(\""+articleId+"\")'>

},

store:function(){

storepage = this;

return new Ext.data.GroupingStore({    

proxy:new Ext.cheping.data.DWRProxy({

dwrFunction: this.Action.getArticles,

listeners: {

'beforeload': function(dataProxy, params){

storepage.storeParams = storepage.setStoreParams(params.start);

var loadArgs = [

  params.query,

params.start,

storepage.defaultPageSize,

];

params[dataProxy.loadArgsKey] = loadArgs;  

}

                }

})

sortInfo:{field: 'fielname', direction: "ASC"}, //时必须指定sortInfo信息

});

},

};

}

*/

Ext.ux.grid.DynamicGridPanel=Ext.extend(Ext.grid.GridPanel, {

enableChecked:true, //。

singleSelect: true,

width:'auto',

height:document.body.clientHeight, //

iconCls :'icon-grid',

stripeRows: true,

collapsible: true,

loadMask: true,

animCollapse: false,

DWRfuncParams:[],

DynamicGridPanel_fields:[],

DynamicGridPanel_columns:[],

hiddenDefaultTbar:true,

GroupingViewConfig:{

 markDirty: false, 

forceFit:false,

sortAscText :'

sortDescText :'

columnsText:'隐藏',

groupByText:'

showGroupsText:'

     groupTextTpl: '{text} ({[values.rs.length]}

},

//private  

initComponent: function(){

 this.initDynamicGridPanelFields();

 this.initDynamicGridPanelStore();

 this.DynamicGridPanel_bbar();

 Ext.ux.grid.DynamicGridPanel.superclass.initComponent.call(this);

 this.iniDynamicGridPanelGrid();

 this.initDynamicGridPanel_cm_tbr();

 this.view= new Ext.grid.GroupingView(this.GroupingViewConfig)

},

pagingConfig:{   

pageSize:20,                    

store: this.store,          

displayInfo:true,

plugins: [new Ext.ux.PageSizePlugin()],

displayMsg: "条 总共{2} 条",

    emptyMsg: "<b>0</b>

},

//private

iniDynamicGridPanelGrid:function(){

 this.DynamicGridPanelstoreParams = this.setDynamicGridPanelStoreParams(0);

 if(this.container){

     this.width = Ext.get(this.container).getComputedWidth(); //

        this.renderTo=Ext.get(this.container);

 }

},

//private

   initDynamicGridPanelStore:function(){

 if(this.store){

    this.store.reader=this.DynamicGridPanel_reader();

    }else{

     this.store= this.DynamicGridPanel_store();

    }

 this.pagingConfig.store = this.store;

 this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});  

},

//private

initDynamicGridPanel_cm_tbr:function(){

 if(!this.cm)

   if(!this.colModel)

            this.colModel=this.DynamicGridPanel_cm();

  

    if(!this.hiddenDefaultTbar)

      this.tbar=this.DynamicGridPanel_ToolBar();

},

setDynamicGridPanelStoreParams:function(start){

        var Params = { params: { start:start} };

        return Params;

},

//private

initDynamicGridPanelFields:function(){

    for (var i = 0; i < this.gridcolumns.length; i++) {

             this.DynamicGridPanel_fields.push({name:this.gridcolumns[i].dataIndex});

this.DynamicGridPanel_columns.push(this.gridcolumns[i]);

     }

},            

//private

DynamicGridPanel_cm:function(){

     if (this.enableChecked) {

                 this.DynamicGridPanel_sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: this.singleSelect, moveEditorOnEnter: true, sortable: false });

                 var arr = [this.DynamicGridPanel_sm];

                 arr.push(new Ext.grid.RowNumberer({header:'

                 var sunfish = this.DynamicGridPanel_columns;

                 for (var i = 0; i < sunfish.length; i++) {

                     arr.push(sunfish[i]);

                 }

             }

             else {

//                 arr = eval('([' + this.columns + '])');

                 arr = this.DynamicGridPanel_columns;

             }

             var col = new Ext.grid.ColumnModel(arr);

             col.defaultSortable = true;

       return col;     

},

//private   

DynamicGridPanel_store:function(){

     var DynamicGridPanelStoreParams = this;

       return new Ext.data.GroupingStore({   

           proxy:new Ext.cheping.data.DWRProxy({

                        dwrFunction: DynamicGridPanelStoreParams.DWRfunc,

                        listeners: {

                            'beforeload': function(dataProxy, params){

                            DynamicGridPanelStoreParams.DynamicGridPanelstoreParams = DynamicGridPanelStoreParams.setDynamicGridPanelStoreParams(params.start);

                            var loadArgs = [

                                params.qname,

                                params.start,

                                DynamicGridPanelStoreParams.pagingConfig.pageSize  

                           ];

                           if(DynamicGridPanelStoreParams.DWRfuncParams.length>0){

                              for(var i=0;i<DynamicGridPanelStoreParams.DWRfuncParams.length;i++){

                               loadArgs[loadArgs.length]=DynamicGridPanelStoreParams.DWRfuncParams[i];

                              }

                           }

                          

                           params[dataProxy.loadArgsKey] = loadArgs;  

        

                           }

                    }

        }),

groupField:this.DynamicGridPanel_fields[0],

groupOnSort:true,

sortInfo:{field: this.gridcolumns[0].dataIndex, direction: "ASC"}, //时必须指定sortInfo信息

     reader: this.DynamicGridPanel_reader()

      });

},

//private

DynamicGridPanel_reader:function(){

     return new Ext.data.JsonReader({

            totalProperty: "totalSize",

            root: "data",

            fields:this.DynamicGridPanel_fields

            });

},

//private   

DynamicGridPanel_bbar:function(){

this.bbar = new Ext.PagingToolbar(this.pagingConfig);

},

DynamicGridPanel_ToolBar:function(){

    

 return new Ext.Toolbar(

     { 

        hidden:this.hiddenDefaultTbar,

        items:[

         '->','

        this.DynamicGridPanel_Search()

            ]

      }

    );

},

DynamicGridPanel_Search:function(){

       return srch = new Ext.app.SearchField({

                store: this.store,

                width:220,

                paramName : 'qname',

                Align:'right'

            });

},

loadData:function() {

 this.getStore().load(this.DynamicGridPanelstoreParams);

},

getInsertRecord:function(){

 var obj={};

 for(var i=0;i<this.DynamicGridPanel_fields.length;i++){

   obj[this.DynamicGridPanel_fields[i].name]=null;

 }

 var record = Ext.data.Record.create(this.DynamicGridPanel_fields);

 var InsertRecord = new record(obj);

 return InsertRecord;

},

getSelectionObjsByName:function(dataName) {

 if(this.getSelectionModel().getCount()<1){

   Ext.MessageBox.alert('请选择数据,可以是多选！');

return;               

}else{

 

 var getSelectionRecordsrList=[];

 for(var i=0; i<