ExtJs4开发动态编辑的表格

最新推荐文章于 2017-09-15 10:32:00 发布

Arisono

最新推荐文章于 2017-09-15 10:32:00 发布

阅读量2.3k

点赞数

分类专栏：【后端知识】文章标签： ext extjs

【后端知识】专栏收录该内容

72 篇文章 1 订阅

订阅专栏

开发动态编辑的表格（1）

Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能，该包下提供了如下3个与表格编辑有关的类。

Ext.grid.plugin.Editing：为表格增加编辑功能的基类。

Ext.grid.plugin.RowEditing：为表格行增加编辑功能的插件类。

Ext.grid.plugin.CellEditing：为单元格增加编辑功能的插件类。

当使用Ext.grid.plugin.RowEditing、Ext.grid.plugin.CellEditing为表格增加编辑时，可以指定如下4种常见的事件处理函数。

beforeedit：在编辑之前触发的事件处理函数。

canceledit：取消编辑时触发的事件处理函数。

edit：编辑完成时触发的事件处理函数。

validateedit：指定编辑完成之后，值被保存到Store之前触发该事件处理函数。如果该事件处理函数返回false，将可以取消编辑。

为该表格增加动态编辑功能，需要完成如下两步：

使用Ext.grid.Panel定义表格时，可通过plugins选项为表格单击单元格编辑插件或行编辑插件。

使用Ext.grid.Panel定义表格，并且使用fields选项定义表格列时，为需要编辑的单元格通过editor选项指定单元格编辑器。

如下示例开发了一个允许异步、动态编辑表格数据的页面。

程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_edit.html

<body> 
<script type="text/javascript"> 
Ext.onReady(function(){  
    Ext.define('Book', {  
        extend: 'Ext.data.Model',  
        fields: [  
            {name: 'id' , type: 'int'},  
            {name: 'name', type: 'string'},  
            {name: 'author', type: 'string'},  
            {name: 'price', type: 'float'},  
        ]  
    });  
    // 创建一个Ext.data.Store对象  
    var bookStore = Ext.create('Ext.data.Store',   
    {  
        // 指定使用Book Model管理记录  
        model: 'Book',  
        // 使用proxy指定加载远程数据  
        proxy:   
        {  
            type: 'ajax',  
            url: 'getAllBooks',// 向该URL发送Ajax请求  
            reader: { // 使用Ext.data.reader.Json读取服务器数据  
                type: 'json',  
                root: 'data' // 直接读取服务器响应的data数据  
            },  
        },  
        autoLoad:true// 自动加载服务器数据  
    });  
    var grid = Ext.create('Ext.grid.Panel', {  
        title: '查看服务器端图书',  
        width: 550, // 指定表单宽度  
        renderTo: Ext.getBody(),  
        // 定义该表格包含的所有数据列  
        columns: [  
            { text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列  
             // 第2个数据列  
            { text: '书名', dataIndex: 'name' , flex: 1,  
                editor: {xtype: 'textfield', allowPattern: false}},  
             // 第3个数据列  
            { text: '作者', dataIndex: 'author', flex: 1,  
                editor: {xtype: 'textfield', allowPattern: false}},  
            // 第4个数据列  
            { text: '价格', dataIndex: 'price' , flex: 1,  
                editor: {xtype: 'numberfield', allowPattern: false}},  
        ],  
        selType: 'rowmodel', // 指定选择模式：行选择模式  
        plugins:   
        [  
            // 增加表格行编辑插件  
            {  
                ptype: 'rowediting',  
                clicksToEdit: 1  
            }  
        ],  
        store: bookStore  
    });  
    // 当表格编辑完成后，触发该事件处理函数  
    grid.on('edit', function(editor, e)  
    {  
        Ext.Ajax.request({  
            url: 'updateBook', // 向此处发送Ajax请求  
            method: 'POST',  
            params: { // 指定请求参数  
                id: e.newValues.id,  
                name: e.newValues.name,  
                author: e.newValues.author,  
                price: e.newValues.price,  
            }, // 指定服务器响应完成的回调函数  
            success: function(response){  
                alert(Ext.JSON.decode(response.responseText).tip);  
                e.record.commit();  
            }  
        });  
    });  
});  
</script> 
</body>

Arisono

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ExtJs4开发动态编辑的表格

开发动态编辑的表格（1）Ext JS在Ext.grid.plugin包下提供了允许编辑表格的插件功能，该包下提供了如下3个与表格编辑有关的类。Ext.grid.plugin.Editing：为表格增加编辑功能的基类。Ext.grid.plugin.RowEditing：为表格行增加编辑功能的插件类。Ext.grid.plugin.CellEditing：为单元格增加编辑功能的插件类
复制链接

扫一扫

专栏目录