动态构建grid

本代码可重用，在工作中我经常使用。

//定义grid的复选框

var sm = new Ext.grid.CheckboxSelectionModel();

//这里可以根据条件设置是否可选，当然不需要可以不用监听此事件
    sm.on('beforerowselect',function(SelectionModel, rowIndex, keepExisting,record){
        if(condition){
             return true;
        }else{
            return false;
        }
    });

//定义json列

var jsonFields =  [{name:'field1'},{name:'field2'}];

//定义gridColumn

var gridColumn =
        [
           sm,
           {header:'列1',width:148,sortable:false,dataIndex:'field1'},

           {header:'列2',width:148,sortable:false,dataIndex:'field2'}

        ];

/**

*定义动态获取grid方法

*fields 数据列

*column grid列

*title grid标题名

*result 传入的json数据，这个需要自己定义，或从后台返回，可以传入空数据{data:[]}

*root 数据key

*sm  CheckboxSelectionModel对象

*form 表单对象，一般的数据操作都会跟表单关联，没有则可为null

*gridHeight 定义grid的高度

**/

var getGridPanel = function(fields,column,title,result,root,sm,form,gridHeight){
    var store = new Ext.data.JsonStore({
        fields:fields,
        data:result,
        root:root,
        autoLoad:false
    });
    var cm = new Ext.grid.ColumnModel(column);
    var gridPanel = new Ext.grid.GridPanel({
        form:form,
        header:false,
        importData:result,
        tbar:[
              {
                  text:'全屏查看',
                  iconCls:'preview',
                  id:'screen',
                  handler:function(){
                      screenView(grid);
                  }
              },{
                  text:'删除',
                  iconCls:'item-delete',
                  handler:function(){
                      var records = gridPanel.getSelectionModel().getSelections();
                      if(0 == records.length){
                          Ext.MessageBox.show({
                                title : '提示',
                                msg : '请选择要删除的数据',
                                buttons : Ext.MessageBox.OK,
                                icon : Ext.MessageBox.INFO
                            });
                      }else{
                          Ext.MessageBox.confirm('确认', '是否确定删除选重的信息？', function(btns) {
                              if (btns == 'yes') {
                                  gridPanel.getStore().remove(records);
                                  //updateUserInfo(form); //我这里是同步更新表单数据
                              }
                          });
                      }
                  }
              },{
                  text:'审核通过',
                  iconCls:'setIsTop',
                  handler:function(){
                      var records = gridPanel.getSelectionModel().getSelections();
                      if(0 == records.length){
                          Ext.MessageBox.show({
                                title : '提示',
                                msg : '请选择要操作的数据',
                                buttons : Ext.MessageBox.OK,
                                icon : Ext.MessageBox.INFO
                            });
                      }else{
                          Ext.MessageBox.confirm('确认', '是否要接受选中学员的报名申请？', function(btns) {
                              if (btns == 'yes') {
                                  for(var i=0;i<records.length;i++){
                                      records[i].data['APPLY_STATUS'] = '2'; //设置某一列的状态值
                                  }
                                  updateUserInfo(form); //同步更新表单数据
                                  var data = form.find('name','QP_USER_APPLYS.USER_INFO')[0].getValue();
                                  gridPanel.getStore().loadData(Ext.decode(data)); //重新加载grid的数据
                              }
                          });
                      }
                  }
              },{
                  text:'审核不通过',
                  iconCls:'setIsTopDown',
                  handler:function(){
                      var records = gridPanel.getSelectionModel().getSelections();
                      if(0 == records.length){
                          Ext.MessageBox.show({
                                title : '提示',
                                msg : '请选择要操作的数据',
                                buttons : Ext.MessageBox.OK,
                                icon : Ext.MessageBox.INFO
                            });
                      }else{
                          Ext.MessageBox.confirm('确认', '是否要取消选中学员的申请？', function(btns) {
                              if (btns == 'yes') {
                                  for(var i=0;i<records.length;i++){
                                      records[i].data['APPLY_STATUS'] = '3';
                                  }
                                  updateUserInfo(form);
                                  var data = form.find('name','QP_USER_APPLYS.USER_INFO')[0].getValue();
                                  gridPanel.getStore().loadData(Ext.decode(data));
                              }
                          });
                      }
                  }
              }
        ],
        id:'applyInfo',
        //autoExpandColumn:'ID_CARD',
        title:title,
        forceFit:true,
        height:gridHeight,
        autoScroll:true,
        store : store,
        collapsible:false,
        enableHdMenu : false,
        cm : cm,
        sm : sm,
        stripeRows : false,
        frame : false,
        region : 'center',
        viewConfig:{

           //根据某一行的列值设置行的颜色
            getRowClass : function(record,rowIndex,rowParams,store){
                 if(record.data.APPLY_STATUS == '3'){
                     return "x-grid-record-red";
                 }
                 if(record.data.APPLY_STATUS == '2'){
                     return "x-grid-record-green";
                 }
            }
        }
    });
    return gridPanel;
}

 

//更新用户数据信息
function updateUserInfo(form){
  var result = [];
  var st = grid.getStore();
  st.each(function(r){
      result.push(r.data);
  });
  var del_data = {"data":result};
  //删除数据后更新用户信息数据
  form.find('name','QP_USER_APPLYS.USER_INFO')[0].setValue(Ext.encode(del_data).replace(/\\/g,''));
}

 

//定义动态添加样式函数
 var addStyle = function(rules) {
        var styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        if ( Ext.isIE ) {   // 判断IE浏览器
            styleElement.styleSheet.cssText = rules;
        }
        else {
            var frag = document.createDocumentFragment();
            frag.appendChild(document.createTextNode(rules));
            styleElement.appendChild(frag);
        }
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    };

//动态添加样式，这里我主要是设置grid列表的行颜色用的

addStyle('.x-grid-record-red table{background: #E6D1E3;}');
addStyle('.x-grid-record-green table{background: #92FCCC;}');

 

以上是全部的代码，如有不明白的，可以留言我们一起讨论，或是有写的不足的还请大家给出意见。