关于Ext.grid.EditorGridPanel使用中遇到的问题

Ext.grid.EditorGridPanel数据操作与验证

最新推荐文章于 2019-08-15 13:02:30 发布

最新推荐文章于 2019-08-15 13:02:30 发布 · 581 阅读

文章标签：

#json

最近做的一个项目使用到了Ext.grid.EditorGridPanel（使用的ext使用的版本是3.3.1的），根据需求，在做的过程中，遇到了这么几个问题：

1、怎么把grid中的数据通过FormPanel提交，也就是要获取grid中的数据，获取数据前的数据验证问题

2、grid中怎么放入checkColumn

3、grid中满足条件的单元格不可编辑问题

好了，说说这几个问题怎么解决的（自己觉得还有更简单的解决方法）：

1、怎么把grid中的数据通过FormPanel提交，也就是要获取grid中的数据，获取数据前的数据验证问题

解决大概思路：获取grid中的数据→转换为json格式的字符串→将此字符串放入表单域中

（1）获取grid中的数据：

a.获取grid中的store对象（似乎js里面没有对象的概念，但是习惯了叫对象）

b.获取每一行的数据，主要运用到的方法有：getCount()、store.getRange()方法，如果只想获取改变了的记录的话，可以用getModifiedRecords()；

getCount()函数主要放回的是store中的记录数，也就是有多少行数据；

getRange()函数连续获得多个record，需要指定开始和结束位置的索引值，开始参数设为0，结束位置设为store记录数就可以全部拿出来了；

getModifiedRecords()函数主要是获取store中有修改的记录，只要你对其中一条数据进行了修改，在改回原来的数据，都认为这条数据被修改过了；

c.将获取的数据转换为json格式，这里我使用的方法是通过遍历把每一行的数据放在一个数组里面，然后把这个数组转换成json格式，ext中有Ext.encode()方法可以转换

d.将此字符串放入表单域中只要XXX.setValue()即可

总的代码如下：

    var store=this.getLspApplyItemCL().getStore();
    var count=store.getCount();//获取总的记录数
    var records;
    var dataArr=new Array();
    var dataString="[]";
    records=store.getRange(0,count);
    for(var i=0;i<count;i++){
      dataArr[i]=records[i].data;
    }
    dataString=Ext.encode(dataArr);//将数组转换成json格式的字符串
    this.getLspApplyItem().getField("data").setValue(dataString);

（2）grid中的数据验证，在获取数据之前就应该对数据进行验证的：

这个方法是对网上的一段代码进行修改的，拿过来用的时候可能是版本原因还是什么，原来的代码地址是：http://scnults.iteye.com/blog/1487637

拿过来后修改了红色部分代码，代码如下：

Ext.apply(Ext.grid.EditorGridPanel.prototype,{
        //增加EditorGridPanel的通用校验方法
  isValid : function(records){
    var cm = this.cm || this.colModel;
      var f = true;
      var column = {};
      for (var i = 0; i < cm.columns.length; i++) {
        var dataIndex = cm.getDataIndex(i);
        column[dataIndex] = i;
      }
      for (var i = 0; i < records.length; i++) {
        var o = records[i].data;
        var rowindex = i;// 行id
        for (var n in o) {
          var colindex = column[n];
          if (!!colindex && !!cm.columns[colindex].editor) {
            Ext.getCmp(cm.columns[colindex].editor.id).setValue(o[n]);//给可编辑控件设值
            var flag = Ext.getCmp(cm.columns[colindex].editor.id).validate();//设值后校验
            f = f && flag;
            if (!flag) {
              Ext.get(this.getView().getCell(rowindex,
                      colindex))
                  .addClass('x-form-invalid');//给不通过校验的具体空格增加错误css样式（Ext中form的样式）
            }
          } else {
            continue;
          }
        }
      }
      return f;
  }
})

使用：

this.getLspApplyItemCL().isValid(store.data.items)

2.Ext.grid.EditorGridPanel中放入checkColumn

看了官方示例和网上搜索的方法，在使用的时候都会出现问题，于是只能在ColumnModel直接new Ext.grid.CheckColumn，new出来后还需要在Ext.grid.EditorGridPanel中加上this.plugins = this.colModel.checkColumn;这里出现了个小问题，我的界面里有两行需要用到CheckColumn，所有用了个数组，还是直接看代码：

columnModel = Ext.extend(Ext.grid.ColumnModel, {
  checkColumn:[],
  constructor : function(config){
    this.checkColumn[0] = new Ext.grid.CheckColumn({
      header: "纸质材料",
      dataIndex: "paper",
      width: 60,
      renderer:this.checkColumnRender,
      onMouseDown:function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
          e.stopEvent();
          var index = this.grid.getView().findRowIndex(t);
          var record = this.grid.store.getAt(index);
          record.set("paperCount",!record.data[this.dataIndex]?1:0);
          record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
      }
    });
    this.checkColumn[1] = new Ext.grid.CheckColumn({
      header: "电子材料",
      dataIndex: "papeCount",
      renderer:this.checkColumnRender,
      width: 60
    });
    var cfg=config || {
      columns:[new Ext.grid.RowNumberer(),{
        xtype: "gridcolumn", scope:this, width: 460,
        id: "zlText", dataIndex: "zlText",
        header: "材料名称",
        editor: new Ext.form.TextField({allowBlank: false}),
        align: "left",  hidden: false, sortable: true,
        renderer:this.zlTextRender
      },{
        scope:this, width: 100,
        id: "zlStyle", dataIndex: "zlStyle",
        header: "材料类型",
        align: "center", hidden: false, sortable: true,
        editor: new Ext.form.ComboBox({
          store :  new Ext.data.SimpleStore({
            fields : ['zlStyle', 'zlStyleText'],
            data : [["0","原件"],["1","复印件"],["2","原件及复印件"]]
          }),       //数据源
          displayField : 'zlStyleText',   //显示下拉列表数据值
          valueField : 'zlStyle',        //提交时下拉列表框的数据值
          typeAhead : true,
          triggerAction : 'all',
          allowBlank : false,
          forceSelection : true,
          mode : 'local'
      })
      },
        this.checkColumn[0]
      ,{
        xtype: "gridcolumn", scope:this, width: 60,
        id: "paperCount", dataIndex: "paperCount",
        header: "纸质(份)",
        editor: new Ext.form.NumberField({allowBlank: false,allowDecimals:false}),
        align: "right", hidden: false, sortable: true
      },this.checkColumn[1]]
    };
    columnModel.superclass.constructor.call(this,cfg);
  },zlTextRender:function(data,cell,record,row,col,store){
    if(record.get("infoId")==record.get("zlGroup")){
      return record.get("zlText");
    }else{
      return String.format("<span style='color:#08298A'>{0}</span><br>{1}",record.get("parentZlText"),record.get("zlText"));
    }
  },rend:function(value){
    for(var i=0;i<ZLSTYLE_DATA.length;i++){
      if(value==ZLSTYLE_DATA[i][0]){
        return ZLSTYLE_DATA[i][1];
      }
    }
  },checkColumnRender:function(v, p, record){
    if(record.get("isUserDefined")!=1&&record.get("infoId")==record.get("zlGroup")){
      return "";
    }
    p.css += ' x-grid3-check-col-td'; 
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"></div>';
  }
});

3、设值单元格不可编辑

感觉这个解决方案没有从根本上解决问题，但是可以用，通过设值Ext.grid.EditorGridPanel的beforeedit事件完成：

this.on("beforeedit",function(obj) {
      if(条件){
        return true;
      }else{
        return false;
      }
    });

在你点击编辑框的时候会调用这个方法，true表示可以编辑，反之，主要是obj这个参数，beforeedit只传入了这个参数，这个参数可以获取到的数据有：

grid – 表格本身
record – 你要编辑的那一行记录
field – 你编辑的列名
value – 你编辑的值
row – 行号
column – 列号

如果你想获取当前列的名字，只要obj.field就可以获取到了，但是beforeedit事件对checkColumn没效果，如果想禁用掉checkColumn就不知道怎么办了，我这里直接把checkColumn给隐藏掉了，调用重写renderer方法就可以了：

new Ext.grid.CheckColumn({
   header: "电子材料",
   dataIndex: "papeCount",
   renderer:function(v, p, record){
    if(可编辑的条件){
     return "";
    }
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
   },
   width: 60
  });

最后做出来的效果：

通过CheckColumn的onMouseDown做了个功能，当选中的时候，纸质（份）默认为1，取消的时候为0，代码：

record.set("paperCount",!record.data[this.dataIndex]?1:0);

还有个东西没调好，就是主材料不应该有份数的，接着想了。