Question

我正在尝试学习extjs 4.1 MVC。我有一个带有多个ajax调用的控制器。当代码在Firefox上运行时，我可以看到所有的ajax调用都已进行，但只有一个成功方法的警报即将出现。虽然所有4个电话都可以查看数据。我做错了什么消化？代码如下：

Ext.define('App.controller.StartupController', {
extend : 'Ext.app.Controller',

models : [ 'BasicModel' ],

stores : [ 'UserStore','RoleStore','RegionStore','ProductStore','FunctionStore' ],

views : [ 'FooterContainer', 'BodyContainer' ],

init : function() {
    this.loadStore();
    this.loadRole();
    this.loadRegion();
    this.loadFunction();
    this.loadProduct();
    this.control({

    });
},
loadRole: function(){
    // create an AJAX request for role
    var roleStore = this.getRoleStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRole',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            roleStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 1: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadRegion: function(){
    // create an AJAX request for region
    var regionStore = this.getRegionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRegion',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            regionStore.loadData(jsonResp);

            Ext.Msg.alert("Info", "UserName from Server 2: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadFunction: function(){
    // create an AJAX request for function
    var functionStore = this.getFunctionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadFunction',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            functionStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 3: "+ jsonResp.userName);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadProduct: function(){
    // create an AJAX request for product
    var productStore = this.getProductStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadProduct',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            productStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 4: "+ response.responseText);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadStore : function() {
}

}）;

Answer 1

我猜想发生的事情是ext只有一个MessageBox组件的实例，它被调用了四次......但是你只能看到最后一个。如果您只是想要某种形式的反馈，我可以使用console.log而不是Ext.Msg.alert。

Answer 2

就这样做，把下一个ajax请求放在成功响应上

    Ext.define('App.controller.StartupController', {
extend : 'Ext.app.Controller',

models : [ 'BasicModel' ],

stores : [ 'UserStore','RoleStore','RegionStore','ProductStore','FunctionStore' ],

views : [ 'FooterContainer', 'BodyContainer' ],

init : function() {
    this.loadStore();
    this.loadRole();
    this.control({

    });
},
loadRole: function(){
    // create an AJAX request for role
    var roleStore = this.getRoleStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRole',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            roleStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 1: "+ jsonResp.userName);
            this.loadRegion();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadRegion: function(){
    // create an AJAX request for region
    var regionStore = this.getRegionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadRegion',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            regionStore.loadData(jsonResp);

            Ext.Msg.alert("Info", "UserName from Server 2: "+ jsonResp.userName);
            this.loadFunction();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadFunction: function(){
    // create an AJAX request for function
    var functionStore = this.getFunctionStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadFunction',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            functionStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 3: "+ jsonResp.userName);
            this.loadProduct();
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadProduct: function(){
    // create an AJAX request for product
    var productStore = this.getProductStoreStore();
    Ext.Ajax.request({
        url : 'forms/loadProduct',
        method : 'POST',
        headers : {
            'Content-Type' : 'application/json'
        },
        params : {
            "test" : "testParam"
        },
        success : function(response) {
            var jsonResp = Ext.JSON.decode(response.responseText);
            productStore.loadData(jsonResp);
            Ext.Msg.alert("Info", "UserName from Server 4: "+ response.responseText);
        },
        failure : function(response) {
            var jsonResp = Ext.decode(response);
            Ext.Msg.alert("Error", jsonResp.error);
        }
    });
},
loadStore : function() {
}

ExtJs多个Ajax调用

2 个答案: