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'
                    }
                }]
            });

执行结果：

将第二行数据改为如下：

单击数据同步：