EditorGridPanel中控制每一单元格是否可编辑

 

EditorGridPanel，顾名思义，就是对GridPanel加入了编辑数据的功能，有了它，我们就可以像直接操作数据库表一样对其进行增删改。同时更改多条数据，一并提交至服务器，无论从效率上还是从用户体验上，都是一件很爽的事情。

EditorGridPanel实际上是GridPanel的子类，具有GridPanel的特性。不同之处在于他的ColumnModel中，多出一项editor

例如：

    {

        header: '期初借方余额', width: 100, dataIndex: 'initDebit', align: 'center',
               editor: new Ext.Editor(new Ext.form.NumberField({width: 100}))

    }

这是EditorGridPanel的一列，第一行代码和GridPanel没啥区别，然后多了一个editor哈，属性的值是一个Editor类，实例化Editor类的时候提供了一个参数，就是这个editor所使用的编辑器，神马textfield啦、numberfield啦、combo啦都可以~

那么我们继续思考，有了Editor，可以对数据进行编辑了，但实际运用过程中，很多数据的编辑是有条件的。ColumnModel使得这个EditorGridPanel的一列全能够编辑，没办法控制啊，例如我这里遇到的情况：财务系统初始化期初余额，财务科目的余额是有方向的，借→只能填期初借方余额，而期初贷方余额为0(即不可编辑)，贷同理。

 

解决方法：利用EditorGridPanel的beforeedit事件，该事件在用户激活了某一列的editor时触发，该条record作为参数的一部分传入了事件处理函数，故我们可以通过判断当前数据的性质决定是否允许其编辑。

listeners: {
          // 在点击进入编辑状态之前，判断该单元格是否具备可编辑条件
          beforeedit: function(e) {

       // e.column可以判定激活了那一列的编辑器，在这个例子中，就是指用户是想编辑期初借方余额还是期初借方余额
              switch(e.column) {
                  case 6: {
                      if (e.record.get('direction') == 1) {
                          e.cancel = true; // 如果余额方向是1，表示该科目方向为贷，故取消用户想要编辑借方余额的操作
                      }
                      break;
                  }
                  case 7: {
                      if (e.record.get('direction') == 0) {
                          e.cancel = true;
                      }
                      break;
                  }
              }
          }

}