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();
    },