使用Ext.grid.column.Action操作表格数据

最新推荐文章于 2023-04-05 22:00:43 发布

Tree-New_Bee

最新推荐文章于 2023-04-05 22:00:43 发布

阅读量1.6k

点赞数

JS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

6.8.10　使用Ext.grid.column.Action操作表格数据

前面已经提到，通过使用Ext.grid.column.Action列类型，可以为表格增加"按钮"列，但用户单击不同按钮时将会激发不同的事件处理函数，比如用户单击"编辑"按钮时，系统弹出浮动窗口修改当前记录；当用户单击"删除"按钮时，系统删除指定记录。

如下示例示范了使用Ext.grid.column.Action按钮列来操作表格数据的方法。

程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_Action.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 editWin;  
    // 定义单击“编辑”按钮的事件处理函数  
    var editFn = function(grid, rowIndex, colIndex)  
    {  
        var rec = grid.getStore().getAt(rowIndex);  
        if(editWin)  
        {  
            editWin.setTitle('编辑《' + rec.get('name') + '》');  
            var formFields = editWin.items.get(0).items;  
            formFields.get(0).setValue(rec.get('id'));  
            formFields.get(1).setValue(rec.get('name'));  
            formFields.get(2).setValue(rec.get('author'));  
            formFields.get(3).setValue(rec.get('price'));  
        }  
        else  
        {  
            editWin = Ext.create("Ext.window.Window",  
            {  
                title : '编辑《' + rec.get('name') + '》',  
                items: [  
                    {  
                        url: 'updateBook',  
                        xtype: 'form',  
                        width: '100%',  
                        bodyPadding: 10,  
                        items: [  
                            {  
                                xtype: 'textfield',  
                                name: 'id',  
                                readOnly: true,  
                                value: rec.get('id'), // 指定该表单控件的值  
                                fieldLabel: 'ID', // 指定该表单控件的标签  
                            },   
                            {  
                                xtype: 'textfield',  
                                name: 'name',  
                                value: rec.get('name'), // 指定该表单控件的值  
                                fieldLabel: '书名', // 指定该表单控件的标签  
                            },  
                            {  
                                xtype: 'textfield',  
                                name: 'author',  
                                value: rec.get('author'), // 指定该表单控件的值  
                                fieldLabel: '作者', // 指定该表单控件的标签  
                            },  
                            {  
                                xtype: 'textfield',  
                                name: 'price',  
                                value: rec.get('price'), // 指定该表单控件的值  
                                fieldLabel: '价格', // 指定该表单控件的标签  
                            }  
                        ]  
                    }  
                ],  
                listeners: {  
                    beforedestroy : function(cmp)  
                    {  
                        this.hide();  
                        return false;  
                    }  
                },  
                bbar: [  
                    {xtype: 'tbfill' ,},  
                    {text:'确定' , handler: function()  
                        {  
                            // 获取表单，实际返回的是Ext.form.Basic对象  
                            var form = editWin.items.get(0).getForm();  
                            // 如果表单输入校验通过  
                            if (form.isValid())   
                            {  
                                // 以Ajax方式提交表单  
                                form.submit(  
                                {  
                                    // 修改成功的回调函数  
                                    success: function(form, action)   
                                    {  
                                        bookStore.reload();  
                                        editWin.hide();  
                                        alert(action.result.tip);  
                                    }  
                                });  
                            }  
                        }  
                    },   
                    {text:'取消' , handler:function()  
                    {  
                        editWin.hide();  
                    }},  
                    {xtype: 'tbfill' ,}  
                ]  
            });  
        }  
        editWin.setVisible(true);  
    };  
    // 定义单击“删除”按钮的事件处理函数  
    var deleteFn = function(grid, rowIndex, colIndex)   
    {  
        if(confirm("确认删除" , "您是否真想删除该记录"))  
        {  
            var rec = grid.getStore().getAt(rowIndex);  
            Ext.Ajax.request({  
                url: 'deleteBook', // 向此处发送Ajax请求  
                method: 'POST',  
                params: { // 指定请求参数  
                    id: rec.get('id')  
                }, // 指定服务器响应完成的回调函数  
                success: function(response){  
                    bookStore.reload();  
                    alert(Ext.JSON.decode(response.responseText).tip);  
                }  
            });  
        }  
    };  
    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}},  
            {  
                text: '操作',  
                xtype:'actioncolumn',  
                width: 50,  
                items: [  
                    {  
                        icon: 'edit.gif', // 指定图标  
                        tooltip: '编辑',  
                        handler: editFn // 指定单击“编辑”按钮的事件处理函数  
                    },  
                    {  
                        icon: 'delete.gif', // 指定图标  
                        tooltip: '删除',  
                        handler: deleteFn // 指定单击“删除”按钮的事件处理函数  
                    }  
                ]  
            }  
        ],  
        store: bookStore  
    });  
});  
</script> 
</body>

上面页面代码中的最后一段粗体字代码指定了在该列增加两个按钮，当用户单击该列的 "编辑"按钮时，系统会激发editFn函数，该函数将会根据需要创建一个Ext.window.Window窗口来编辑当前记录；当用户单击该列的"删除"按钮时，系统将会激发"deleteFn"函数，该函数将会弹出一个确认框，让用户确认是否需要删除当前记录。

在浏览器中浏览该页面，单击"编辑"按钮，将可以看到如图6.82所示界面。

Tree-New_Bee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Ext.grid.column.Action操作表格数据

6.8.10　使用Ext.grid.column.Action操作表格数据前面已经提到，通过使用Ext.grid.column.Action列类型，可以为表格增加"按钮"列，但用户单击不同按钮时将会激发不同的事件处理函数，比如用户单击"编辑"按钮时，系统弹出浮动窗口修改当前记录；当用户单击"删除"按钮时，系统删除指定记录。如下示例示范了使用Ext.grid.column.Action按钮列
复制链接

扫一扫