ExtJs4开发动态编辑的表格

  1. 云栖社区>
  2. 博客>
  3. 正文

ExtJs4开发动态编辑的表格

聚优云惠 2014-03-22 09:27:51 浏览270
展开阅读全文

开发动态编辑的表格(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> 


网友评论

登录后评论
0/500
评论
聚优云惠
+ 关注