jQuery MiniUI,Ajax Web开发

ExtJs editor插件扩展

Ext.ux.grid.RowEditor 是个非常不错的插件,但是不便之处就是不同gird 总要根据这个grid制定相应的编辑器,因为每个grid修改后post给后台的参数不一样,主要麻烦在自定义post参数上面,其实很早之前就想自己稍微扩展下,让它自动帮我识别参数,下面是代码,希望借此抛砖引玉(插入js不行,):

Ext.ns("Test", "Test.Office");
Test.Office.editor=function(config){
        //this.Params = Object.keys(this.rec[0].json); //取得参数索引
        //Test.Office.editor.superclass.constructor.call(this,config)
        var defConf={
            saveText: 'Save',
            listeners:{
                'afteredit':function(){
                    var s =Ext.getCmp(config.gridId).getSelectionModel().getSelections();
                    var Params = Object.keys(s[0].json);
                    var tempArr = {};
                    for(var i in Params){
                        if(Params.hasOwnProperty(i)){
                            tempArr[Params[i]]=s[0].get(Params[i]);
                        }
                    }
                    //params = JSON.stringify(tempArr);
                    var params = Ext.encode(tempArr);
                    console.log(params);
                    Ext.Ajax.request({
                        url:config.url,
                        method:'POST',
                        //params:params,
                        params:tempArr,
                        success:function(response){
                            var obj = Ext.decode(response.responseText);
                            if(obj.success){
                                                                Ext.MessageBox.alert("提示","修改成功");
                                                                config.ds.reload();
                            }else{
                                                                Ext.MessageBox.alert("提示","修改失败");
                                }
                            }
                        
                    })
                    
                },
                'canceledit':function(){
                    config.ds.reload();
                }
            }
        };
        Ext.apply(config,defConf);
        Test.Office.editor.superclass.constructor.call(this,config)
        
        
    };
    
Ext.extend(Test.Office.editor,Ext.ux.grid.RowEditor,{});

使用方法:

title:'ip地址',
                                        items:[{
                                                xtype:'grid',
                                                id:'ipGrid',
                                                height:400,
                                                plugins:[new Test.Office.editor({"url":"/assetmgent/index.php?mod=ip&action=busindex&resourceId/","gridId":"ipGrid"})],
                                                style:{
                                                        marginTop: '10px',
                                                        marginRight:'5px',
                                                        marginLeft:'5px',
                                                },
                                                viewConfig:{forceFit:true},
                                                selModel:new Ext.grid.RowSelectionModel({singleSelect:false}),
                                                store:new Ext.data.JsonStore({
                                                        root:"data",
                                                        url:"/assetmgent/index.php?mod=ip&action=busindex&resourceId="+obj.id,
                                                        fields:['f_mapId','f_idc_name','f_ip','f_isp','f_status','f_remark'],
                                                        autoLoad:true
                                                }),

作者:howge
原文:http://blog.chinaunix.net/uid-17291169-id-3672207.html