ext+dwr DynamicGridPanel 封装 态创建ext grid

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

Ext.namespace("Ext.ux.grid");
/**
 * @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 的配置属性 大部分属性按默认即可，一般只需定义gridcolumns属性
       this.datagrid = new Ext.ux.grid.DynamicGridPanel({
//          store:this.store(), //自定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+"\")'>修改</a>"
      
  },
  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"}, //使用GroupingStore时必须指定sortInfo信息
      });
    },
  };
  }
  */

 Ext.ux.grid.DynamicGridPanel=Ext.extend(Ext.grid.GridPanel, {
	enableChecked:true, //是否有CheckBox。
	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: "当前记录:{0} - {1} 条  总共{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:'序号',width:40}))
	                 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"}, //使用GroupingStore时必须指定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<this.getSelectionModel().getSelections().length;i++){ 
        		if(null!=this.getSelectionModel().getSelections()[i].data[dataName] 
        		    && ""!=this.getSelectionModel().getSelections()[i].data[dataName].trim())
            	getSelectionRecordsrList.push(this.getSelectionModel().getSelections()[i].data[dataName]);
      		}
            return  getSelectionRecordsrList;
        }
    },
    
    getSelectionObjByName:function(dataName) {
    	if(this.getSelectionModel().getCount()==1){             		
            return  this.getSelectionModel().getSelections()[0].data[dataName];
        }else{ 
            Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
            return;
        }
    },
    getSelectedObj:function() {
    	if(this.getSelectionModel().getCount()==1){ 
            return  this.getSelectionModel().getSelections()[0].data;
        }else{ 
            Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
            return;
        }
    },
     getFormRecord:function() {
    	if(this.getSelectionModel().getCount()==1){ 
            return  this.getSelectionModel().getSelections()[0];
        }else{ 
            Ext.MessageBox.alert('提示', '请选择数据,并且只能选一条！');
            return;
        }
    }

});

public Map extFind(final String hql,final int start,final int pagesize) {
		List temp = this.getHibernateTemplate().find(getCounthql(hql));
		long totalSize = temp!=null&&temp.size()>0?Long.parseLong(temp.get(0)+""):0L;
		//long totalSize = ((Long)this.getHibernateTemplate().find(counthql).iterator().next()).longValue();
		
		List lst = getHibernateTemplate().executeFind( new  HibernateCallback() { 
		     public  Object doInHibernate(Session s)  throws  HibernateException, SQLException { 
		           Query query  =  s.createQuery(hql); 
		           query.setFirstResult(start); 
		           query.setMaxResults(pagesize);		           
		           List list  =  query.list(); 
		           return  list; 
		           } 
		     });
		HashMap map = new HashMap();
        map.put("totalSize", totalSize);
        map.put("data", lst);
        return  map; 
	}

用到的dwrproxy.js
dwrproxy.js
Ext.app.SearchField
PageSizePlugin