编辑 Ext 表格（二）——— 编辑表格元素

1、编辑单元格

Ext 中经过配置表格的属性 plugins 来设置表格是否可编辑，

表格的配置具体以下：

var gridTable = Ext.create('Ext.grid.Panel', {

    id: 'gridTable',

    region: 'center',

    layout: 'fit',

    columns: cols,

    store: gridStore,

    autoScroll: true,

    selModel: {  // 光标显示的是单元格模式

        selType: 'cellmodel'

    },

    plugins: [

        Ext.create('Ext.grid.plugin.CellEditing', {

            clicksToEdit: 1 //设置单击单元格编辑

        })

    ],

});

 

配置完表格还须要对表格列的 editor 进行配置，

才能实现单元格编辑，例如：

{

    text: '姓名',

    dataIndex: 'Name',

    minWidth: 85,

    maxWidth: 85,

    sortable: false,

    menuDisabled: true,

    editor: {

        xtype: 'textfield',

        enableKeyEvents: false,

    }

},

{

    text: '列',

    dataIndex: 'col',

    width: 120,

    sortable: false,

    menuDisabled: true,

    renderer: function (a, b, c, rowIdx, colIdx) {

        if ("object" == typeof (a)) {

            var r = Ext.util.Format.date(a, 'H:i');

            return r;

        }

 

        return "";

    },

    editor: {

        xtype: 'timefield',

        format: 'H:i',

        enableKeyEvents: false,

    }

}

效果以下：

 

修改完按回车键，发现修改的单元格左上角有一个红色三角形，

 

这是 Ext 用来标记修改过的单元格，

若是想要修改完后不显示红色图标，

能够调用 commit()。

例如能够在 gridTable 中绑定一个 'edit' 事件，

当检测到单元格数据发生改变的时候触发，

代码以下：

listeners: {

    'edit': function (editor, e) {

        e.record.commit();

    },

}

 

2、右击单元格弹窗

首先先定义一个右键弹窗的面板，以下：

var contextmenu = new Ext.menu.Menu({

    id: 'context-menu',

    items: [{

        id: 'context-menu-first',

        rowIdx: 0,

        colIdx: 0,

        handler: function (m) {

            if ("设置" == m.text) {

                Ext.MessageBox.alert("提示", "设置成功");

            }

        }

    }]

});

 

而后在 gridTable 中定义一个鼠标右击事件：

'itemcontextmenu': function (view, record, item, index, e) {

    // 禁用系统默认右键菜单

    e.preventDefault();

 

    contextmenu.items.items[0].setText("设置");

    contextmenu.showAt(e.getXY());

}

效果以下：

 

完整的代码：

 1  <!-- 数据定义 -->
 2 <script type="text/javascript">
 3     var data; // 表格数据
 4     var cols; // 表格列
 5 
 6     var gridStore = Ext.create('Ext.data.Store', {  7  fields: ['Name']  8  });  9 
 10 </script>
 11 
 12 <!-- 事件定义 -->
 13 <script type="text/javascript">
 14     // 初始化整个页面
 15     function onInit() {  16  onLoadData();  17 
 18  onInitVar();  19  onInitColumn();  20  };  21     // 请求加载表格数据
 22     function onLoadData() {  23  data = [{ 'Name': '老狼' }, { 'Name': '小羊' }];  24  gridStore.loadData(data);  25  };  26 
 27     // 初始化页面的变量参数
 28     function onInitVar() {  29  cols = [  30  {  31  xtype: 'rownumberer',  32  text: '序号',  33  align: 'center',  34  minWidth: 50,  35  maxWidth: 50,  36  },  37  {  38  text: '姓名',  39  dataIndex: 'Name',  40  minWidth: 85,  41  maxWidth: 85,  42  sortable: false,  43  menuDisabled: true,  44  editor: {  45  xtype: 'textfield',  46  enableKeyEvents: false,  47  }  48  }  49  ];  50  };  51     // 初始化列
 52     function onInitColumn() {  53  gridTable.reconfigure(gridStore, cols);  54  };  55 
 56     // 添加行
 57     function onAddRow() {  58  gridStore.add({});  59  };  60     // 删除行
 61     function onDelRow() {  62  gridStore.removeAt(gridStore.count() - 1);  63  };  64     // 添加列
 65     function onAddColumn() {  66  cols.push({  67  text: '列',  68  dataIndex: 'col',  69  width: 120,  70  sortable: false,  71  menuDisabled: true,  72  editor: {  73  xtype: 'textfield',  74  enableKeyEvents: false,  75  }  76  });  77 
 78  gridTable.reconfigure(gridStore, cols);  79  };  80     // 删除列
 81     function onDelColumn() {  82  cols.pop()  83  gridTable.reconfigure(gridStore, cols);  84  };  85 
 86     // 保存
 87     function onSave() {  88 
 89  console.log(gridTable);  90  console.log(gridStore.data);  91  };  92 
 93 </script>
 94 
 95 <!-- 面板定义 -->
 96 <script type="text/javascript">
 97     var toolbar = Ext.create('Ext.form.Panel', {  98  id: 'tool-bar',  99  region: 'north', 100  bbar: [ 101  { 102  xtype: 'button', 103  text: '添加行', 104  handler: onAddRow 105  }, 106  { 107  xtype: 'button', 108  text: '删除行', 109  handler: onDelRow 110  }, 111  { 112  xtype: 'button', 113  text: '添加列', 114  handler: onAddColumn 115  }, 116  { 117  xtype: 'button', 118  text: '删除列', 119  handler: onDelColumn 120  }, 121  { 122  xtype: 'button', 123  text: '保存', 124  handler: onSave 125  } 126  ] 127  }); 128 
129     //表格右键菜单
130     var contextmenu = new Ext.menu.Menu({ 131  id: 'context-menu', 132  items: [{ 133  id: 'context-menu-first', 134  rowIdx: 0, 135  colIdx: 0, 136  handler: function (m) { 137                 if ("设置" == m.text) { 138  Ext.MessageBox.alert("提示", "设置成功"); 139  } 140  } 141  }] 142  }); 143     var gridTable = Ext.create('Ext.grid.Panel', { 144  id: 'gridTable', 145  region: 'center', 146  layout: 'fit', 147  columns: cols, 148  store: gridStore, 149  autoScroll: true, 150  selModel: { // 光标显示的是单元格模式
151  selType: 'cellmodel'
152  }, 153  plugins: [ 154  Ext.create('Ext.grid.plugin.CellEditing', { 155  clicksToEdit: 1 //设置单击单元格编辑
156  }) 157  ], 158  listeners: { 159             'edit': function (editor, e) { 160  e.record.commit(); 161  }, 162             'itemcontextmenu': function (view, record, item, index, e) { 163                 // 禁用系统默认右键菜单
164  e.preventDefault(); 165 
166  contextmenu.items.items[0].setText("设置"); 167 
168  contextmenu.showAt(e.getXY()); 169  } 170  }, 171 
172  }); 173 </script>
174 
175 <!-- 脚本入口 -->
176 <script type="text/javascript">
177  Ext.onReady(function () { 178  Ext.create('Ext.Viewport', { 179  id: 'iframe', 180  layout: 'border', 181  items: [ 182  toolbar, 183  gridTable, 184  ] 185  }); 186 
187  onInit(); 188  }); 189 </script>