当前位置:编程学习 > JS >>

Extjs4---用RowEditing对数据进行增加,修改

给grid添加RowEditing:
[javascript] 
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
            pluginId:'rowEditing', 
            saveBtnText: '保存', 
            cancelBtnText: "取消", 
            autoCancel: false, 
            clicksToEdit:2<span style="white-space:pre">    </span>//双击进行修改 
        }) 

然后在grid里面配置即可:
[javascript]
plugins: [ 
                             rowEditing 
                    ], 


1、增加:
给“增加”添加点击事件,点击时,在store中添加一个新的record,并调用startEdit(0,0)方法,参数表示编辑第一行,也就是刚添加的新行
[javascript]
'center button[id = addContact]':{ 
                click:function(){ 
                    //得到通讯录的store,并添加一个新的空行 
                    var contactStore = Ext.getStore('ContactStore'); 
                    var contactModel = Ext.create('MS.model.Contact',{}); 
                    contactStore.insert(0,contactModel); 
                    //得到rowEditing添加事件 
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin; 
                    rowEditing.startEdit(0,0); 
                } 
            }, 


然后在输入信息即可

2、修改:
当点击“修改”时,找到选择的列,或者双击某列时进行修改
[javascript] 
'center button[id = updateContact]':{ 
                click:function(){ 
                     
                    //得到rowEditing添加事件 
                    var rowEditing = Ext.getCmp('contactGridpanel').editingPlugin; 
                    var data = Ext.getCmp("contactGridpanel").getSelectionModel().getSelection(); 
                    if(data.length == 0) { 
                        Ext.MessageBox.alert(   
                                '提示',   
                                '请在您要修改的行前面打勾,或者直接双击您想修改的行!'   
                        ); 
                    }else{ 
                        rowEditing.startEdit(data[0].index,0); 
                    } 
                } 
            }, 


3、保存
不管是添加还是修改,保存用的事件是grid的edit事件

[javascript]  
edit:function(editor,e,eOpts){ 
                     
                        // "添加"  当id为空时,表示添加新的联系人 
                        if(id == ''){ 
                             
                            //执行操作 
                            var myMask = new Ext.LoadMask(Ext.getBody(), { 
                                msg: '正在添加,请稍后...', 
                                removeMask: true //完成后移除 
                            }); 
                            myMask.show(); 
                             
 &

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,