Ext表格控件二（更新10月11，选自《掏钱学习EXT》）

七.EditorGrid

3.一切就绪，做一个保存按钮

{
   text:‘保存‘,
   handler:function(){
             var m = ds.modified.slice(0);
             var jsonArray = [];
             Ext.each(m,function(item){
                     jsonArray.push(item.data);
                       }
               );

     Ext.lib.Ajax.request(
          ‘post‘,
          ‘grid2.jsp‘,
          {success:function(response){
                        Ext.Msg.alert(‘信息‘,response.responseText,function(){
                         ds.reload();
                                    }) ;
                        }
               },
             failure:function(){
              Ext.Msg.alert(‘错误‘，‘与后台联系的时候出现你问题‘);
 },
      ‘data=‘+encodeURLComponent(Ext.encode(jsonArray))
          );
      }
}

流程是这样的，首先获得ds中修改的数据，然后放在json里头，用ajax发送到后台。ds.modified是修改后的数组，再用slice(0)进行切割，意味着从第一个元素一直切到最后一个元素，等于复制你一个数组，这样就不会对原有数组造成影响。

Ext.each(array,fn)里面有两个参数，第一个是数组，第二个是函数，启动each后，会循环数组里面的每个元素，然后一个个的传给回回调函数处理。是简化循环的一种方式。

介绍一下ds的参数prunemodifiedRecords，把这个设置为true的话，每次进行remove或者load操作时ds会自动清除modified记录，避免出现下次提交还会把那些modified信息带上的现象。

4.保证提交数据的有效性。

咱们这里设置你allowBlank：false只能限制修改已有数据的单元格，如果新建一行后里边的数据就无法检测到了。这些空白的数据也会直接被提交，这样的无效数据是不可取的。

所以我们提交之前要判断一下

for(var i =0;i<m.length;i++){
   var record = m[i];
   var fields = record.fields.keys;

  for(var j=0;j<fields.length;j++){
     var name = fields[j];
     var value = record.data[name];

     var colIndex = cm.findColumnIndex(name);
     var rowIndex = ds.indexOfId(record.id);
     var editor = cm.getCellEditor(colIndex).field;

     if(!editor.validateValue(value)){
         Ext.Msg.alert(‘提示‘,‘请确保输入的数据正确‘,function(){
              grid.startEditing(rowIndex,colIndex);
          });
          return;
    }
  }
}

我们推敲一下：

（1）首先循环m，获得每个被修改的行，var record = m[i];代表某一行，而var fields = record.fields.keys代表一共有多少列。

（2）按列循环，获得当前每个单元格。具体获得你有name列名，value单元格的数值，colIndex列号，rowIndex行号，editor这一列用到的编辑器。

（3）准备充分之后我们进行校验，用editor.isValid()方法会出现el不存在的错误，使用editor.validateValue(value)的方式进行校验，这是isValid()内部实现方法。

5.限制类型，让用户只能选择我们提供的数据

为了限制用户，我们可以用NumberField控制，使其只能输入数字，ComboBox只能输入备选几项，DateField是选择日期等等。

我们新增一些数据模型，才能更好第展示成果：

var data = [
    [1.1,1,new Date(),true],
    [2.2,2,new Date(),false],
    [3.3,0,new Date(),true],
    [4.4,1,new Date(),false],
    [5.5,1,new Date(),true]
  ];    

第一列是数字，第二列是comboBox对应的id，第三列是日期，第四列是布尔型。

现在把这5列设置各自的编辑器，第一列是咱们限制只能用数字，不能为负数，而且数字不能超过10。

var cm = new Ext.grid.ColumnModel(
      header:"数字列",
      dataIndex:"number",
      editor: new Ext.grid.GridEditor(
            new Ext.form.NumberField(
            {allowBlank:false,             allowNegative:false,             maxValue;10                  }
             )
       )
  );

使用NumberField就是只能输入数字，allowNegative:false就是不能输入减号。

第二列稍微有点儿复杂，我们先准备一个下拉列表：

var comboData =[
 [‘0‘,‘新版ext教程‘],
 [‘1‘,‘EXT在线支持‘],
 [‘2‘,‘EXT扩展‘]
];

紧接着cm部分的代码有

{
   header:‘选择列‘,
   dataIndex:‘combo‘,
   editor: new Ext.grid.GridEditor(new Ext.form.ComboBox(
          {store:new Ext.data.simpleStore(
                  fields:[‘value‘,‘text‘],
                  data:comboData),
                  emptyText:‘请选择‘,
                  mode:‘local‘,
                  triggerAction:‘all‘,
                  valueField:‘value‘,
                  displayField:‘text‘,
                  readOnly:true
})),

    renderer:function(value){
         return comboData[value][1];
       }
},

renderer这个函数我们研究研究，有些人询问EditorGrid里的ComboBox不能正常显示，其实呢这就是因为少了renderer函数，毕竟EditorGrid里的编辑器只有实际编辑的时候起作用。

余下的列名就不一一介绍了。

八.2.0版本里的1.0版本没有的控件

1.PropertyGrid属性表格

这个控件是自动拓展了EditorGridPanel，所以可以直接编辑右边的内容。

var grid = new Ext.grid.PropertyGrid({
                   title:‘属性表格‘,
                    autoHeight:true,
                    width:300,
                    renderTo:300,
                    source:{
                      ‘name‘:‘property‘,　　　　　　　　　　　　　‘time‘:new Data(Data.parse(‘12/15/2007‘)),
                       //......
                            }});

renderTo为指定渲染id。

(1)这里我们简单讲讲对grid只读操作的处理，也是表征取消某种操作的方法：

grid.on(‘beforeedit‘,function(e){
   e.cancel = true;
    return false;
  });

(2)根据name获得value

grid.store.getById(‘name‘).get(‘value‘);

PropertyGrid没有提供方法，我们通过store来找。

（3）自定义编辑框

如果我们需要对编辑器做更加详细的配置，PropertyGrid的customEditors让我们可以指定id的那行数据进行操作。看例子：

var grid = new Ext.grid.PropertyGrid({
   titlie:"属性表格",
   autoHeight:true,
   width:300,
   renderTo:"grid",
   customEditors:{

          ‘Start Time‘:new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))},

    source:{
           ‘Start Time‘:‘10:00 AM‘
     }
});

customEditors和source基本一样，前头的名字一样的两组数据会自动对应抵起来。

2.交叉报表

我们要做出这样的效果，而数据是这样的：

var data = [
 [‘1‘,‘male‘,‘name1‘,‘descn1‘],
 [‘2‘,‘female‘,‘name1‘,‘descn2‘],
 [‘3‘,‘male‘,‘name1‘,‘descn3‘],
 [‘4‘,‘female‘,‘name1‘,‘descn4‘],
 [‘5‘,‘male‘,‘name1‘,‘descn5‘],
];

我们是通过Ext.data.GroupingStore对数据进行分拣的，然后提供给GridPanel。

var store = new Ext.data.GroupingStore({
         reader:reader,
         data:data,
         groupField:‘sex‘,
         sortInfo:{field:‘id‘,direction:‘asc‘}}
);

这里的reader和data还是原来那个，groupField是指定是哪一项要进行分组，还必须设置sortInfo，这个参数需要两项，field是排序的属性，direction是排序的方式，ASC正序和DESC逆序。

想看到我们需要的形式，还需要设置一个GroupingView。

var grid = new Ext.grid.GridPanel(
{    store:store,
      columns:columns,
      view:new Ext.grid.GroupingVIEW(),
      renderTo:‘grid‘
});

九.改变大小，可以拖拽的表格

不详细介绍，

var  rz = new Ext.Resizable(‘grid‘,{
       wrao:true,
       minHeight:100,
       pinned:true,
       handles:‘s‘});

rz.on(‘resize‘,grid.autoSize,grid);

　其中，s（south）是只能拖动下面的意思。