EXTJS4自學手冊——頁面控制項（表格的外掛程式）

一、Ext.grid.plugin.CellEditing

說明：編輯表格儲存格外掛程式

例子：

定義store：

            var store = Ext.create("Ext.data.ArrayStore", {                fields: ['id', 'name', 'age', 'address'],                data: [                    [1, 'aaa', '23', '江津'],                    [2, 'bbb', '34', '北碚'],                    [3, 'ccc', '33', '江津'],                    [4, 'ddd', '54', '杭州'],                    [4, 'eee', '24', '北碚']                    ]            });

定義表格：

Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                forceFit: true,                renderTo: Ext.getBody(),                //儲存格選擇模式                selType: 'cellmodel',                plugins: [                //編輯儲存格外掛程式                    Ext.create("Ext.grid.plugin.CellEditing", {                        //雙擊開始編輯                        clicksToEdit: 2                    })                ],                columns: [{                    text: '姓名', dataIndex: 'name',                    //定義編輯狀態時的控制項，沒有定義不能編輯                    editor: {                        xtype: 'textfield',                        //是否可以為空白                        allowBlank: false                    }                }, {                    text: '年齡', dataIndex: 'age',                    editor: {                        xtype: 'datefield'                    }                }]            });        });

執行結果：

二、Ext.grid.plugin.RowEditing

說明：行編輯外掛程式：

例子：

定義store同上

定義表格：

Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                renderTo: Ext.getBody(),                //儲存格選擇模式                selType: 'rowmodel',                plugins: [                //編輯儲存格外掛程式                    Ext.create("Ext.grid.plugin.RowEditing", {                        //雙擊開始編輯                        clicksToEdit: 2                    })                ],                columns: [{                    text: '姓名', dataIndex: 'name',                    //定義編輯狀態時的控制項，沒有定義不能編輯                    editor: {                        xtype: 'textfield',                        //是否可以為空白                        allowBlank: false                    }                }, {                    text: '年齡', dataIndex: 'age',                    editor: {                        xtype: 'datefield'                    }                }]            });

執行結果：

三、同步資料到後台伺服器

說明：通過表格的getStore()方法擷取表格的store容器，然後通過store容器的sync方法，同步資料

例子：

定義store:

 var store = Ext.create("Ext.data.ArrayStore", {                fields: ['name', 'age'],                               proxy: {                    type: 'sessionstorage',                    id: 'myInfo'                }            });            store.add([['aaa', '13'], ['bbb', '23']])

定義表格：

 Ext.create('Ext.grid.Panel', {                title: '學習grid控制項',                store: store,                renderTo: Ext.getBody(),                //儲存格選擇模式                selType: 'rowmodel',                plugins: [                //編輯儲存格外掛程式                    Ext.create("Ext.grid.plugin.RowEditing", {                        //雙擊開始編輯                        clicksToEdit: 2                    })                ],                dockedItems: [{                    xtype: 'toolbar',                    items: [{                        text: '同步資料',                        dock: 'top',                        handler: function () {                            //同步資料方法                            store.sync();                        }                    }]                }],                columns: [{                    text: '姓名', dataIndex: 'name',                    //定義編輯狀態時的控制項，沒有定義不能編輯                    editor: {                        xtype: 'textfield',                        //是否可以為空白                        allowBlank: false                    }                }, {                    text: '年齡', dataIndex: 'age',                    editor: {                        xtype: 'datefield'                    }                }]            });

執行結果：

將第二行資料改為如下：

單擊資料同步：