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

执行结果：

将第二行数据改为如下：

单击数据同步：