EXTJs前端传值的几种方式

Ajax交互方式

以前看书上说Extjs是一个ajax框架，ajax应该是基础的方式哈

Ext.Ajax.request( {
//被用来向服务器发起请求默认的url
url : "",
//请求时发送后台的参数,既可以是Json对象，也可以直接使用“name = value”形式的字符串
params : {
name:'value'
},
//请求时使用的默认的http方法
method : "post",
//请求成功时回调函数
success : function() {
Ext.ux.Toast.msg("信息提示", "成功删除所选记录！");
},
//请求失败时回调函数
failure : function() {
Ext.ux.Toast.msg("信息提示", "信息删除出错，请联系管理员!");
}
}
);

案例

                        Ext.Ajax.request({
                            url:'xxx/xxx.do' ,
                            jsonData:jsonArray,
                            success:function(response, action){
                                var responseObj = Ext.decode(response.responseText);
                                me.unmask();
                                me.getStore().reload();
                                if(responseObj.success === true || responseObj.success === 'true') {
                                    return Ext.ux.Toast.msg(responseObj.message);
                                } else {
                                    return Ext.ux.Toast.msg(responseObj.message);
                                }
                            },
                            scope:this
                        }) ;

Model交互方式

form方面

//提交数据

formPanel.getForm().submit(
{
method : "post",
params : {
name:'value'
},
waitMsg : "正在提交数据",
success : function(b, c) {
Ext.ux.Toast.msg("操作信息", "提交成功!");
},
failure : function(b, c) {
Ext.ux.Toast.msg("操作信息", "提交失败!");
}
}
);

form.getRecord().save({
success: function (record, operation) {
record.commit();
if(store.indexOf(record) == -1) {
store.add(record);
}
Ext.ux.Toast.msg("修改成功");
},
failure: function (record, operation) {
record.reject();
Ext.ux.Toast.msg("修改失败原因："+operation.error);
},
scope: me
})

//加载数据

formPanel.getForm().load(
{
deferreRender : false,
url : "",
method : "post",
waitMsg : "正在载入数据",
success : function(e, g) {
var num = g.result.data.num;
var numCmp = Ext.getCmp("num");
numCmp.setValue(num);
Ext.ux.Toast.msg("操作信息", "载入成功");
},
failure : function(a, b) {
Ext.ux.Toast.msg("操作信息", "载入失败");
}
}

model方面

model.load(record.data.id, {
scope: this,
failure: function (record, operation) {
//do something if the load failed
},
success: function (record, operation) {
var form = xxx;
if (form.isHidden()) {
form.show();
form.loadRecord(record);
}
},
callback: function (record, operation) {
//do something whether the load succeeded or failed
}
});

数据源store

store通常是作为grid的数据源,以便来更新grid的数据.其实这也是它最正规的用法,但其也可以把它作为与后台交互的一种方法,前提是只需向后台发送数据,而不需要接收后台返回的数据.

    创建一个公共的store,不与任何表有联系,只需要下面简单的几句话

    var publicstore = Ext.create('Ext.data.Store', {
           proxy : {
                type : 'ajax',
                url : ''
           }
      });

　如果只是想往后台传个数据的话

　publicstore.proxy.url='a.action?id=1';

   publicstore.load();

    onSave:function (button,e) {
    //alert("123");
        var me=this,
            form=me.getForm(), //提供此面板的窗体访问
            grid=me.getGrid(),//提供此面板的窗体访问
            selModel=grid.getSelectionModel(),//列表获取选中的记录
            record=form.getRecord(),//表单获取记录
            phantom=record.phantom,//当服务器数据库还不存在的对象为真，任何真实的数据库pk集作为其id属性的记录都不为幻象--他是真实的
            store=grid.getStore(),//grid获取数据
            selIndex=-1;//选中下标

        if(form.getForm().isValid()){//函数检查表单是否具有所有的有效字段
            store.lastSelected=record;//grid最后选中的记录
            form.updateRecord();//表单改变
            //*****新增保存
            if(phantom){//服务端不存在记录
                store.add(record);//grid新增一条数据
            }
            //******修改保存
            store.proxy.writer.allowSingle = true;//配置为false，以确保始终将记录封装在数组中，即使只发送一条记录。当有多个记录时，它们总是被编码成一个数组。
            selModel.lastSelected && store.each(function(record,index){//最后选中的记录  each  每条记录都去查一下

                if(selModel.lastSelected == record){
                    selIndex = index;//下标
                    return false;//跳出这个循环
                }
            });

            store.sync({//数据同步
                success:function(batch,options){
                    store.commitChanges();//grid提交所有未完成更改的记录，要处理要更改的更新
                    selModel.select(Math.min(selIndex,store.getCount()));
                    /*
                     * selModel.select 当前选中那种的数组
                     * Math.min  数字最小
                     * store.getCount()获取存储中的记录数量。
                     * */
                },
                failure:function(e,options){////拒绝对所有修改过的记录进行未完成的更改，并重新插入在本地删除的任何记录。任何虚假记录将被删除。
                    store.rejectChanges();
                },
                scope:me
            });
        }
        }

sync方法部分源码

sync: function(options) {
        var me = this,
            operations = {},
            toCreate = me.getNewRecords(),
            toUpdate = me.getUpdatedRecords(),
            toDestroy = me.getRemovedRecords(),
            needsSync = false;

        if (toCreate.length > 0) {
            operations.create = toCreate;
            needsSync = true;
        }

        if (toUpdate.length > 0) {
            operations.update = toUpdate;
            needsSync = true;
        }
getUpdatedRecords: function() {
        return this.data.filterBy(this.filterUpdated).items;
    },
filterBy : function(fn, scope) {
        var me = this,
            newMC  = new me.self(me.initialConfig),
            keys   = me.keys,
            items  = me.items,
            length = items.length,
            i;

        newMC.getKey = me.getKey;

        for (i = 0; i < length; i++) {
            if (fn.call(scope || me, items[i], keys[i])) {
                newMC.add(keys[i], items[i]);
            }
        }

        return newMC;
    },
filterUpdated: function(item) {
        
        return item.dirty === true && item.phantom !== true && item.isValid();
    },