編輯 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>