Ajax Sencha Touch：如何从控制器将数据存储更新为列表

我在从控制器更新列表时遇到问题。我有存储、模型和列表来显示Json数据。我可以获取数据，但无法更新列表。如果在我的应用商店中使用ajax调用，我可以使用list访问数据，但不会调用listners。所以我把代码移到了控制器上。 这是我的商店：

Ext.define('MyApp.store.StoreList', {
    extend:'Ext.data.Store',
    requires:['MyApp.model.ModelList'],
    config:{
        model:'MyApp.model.ModelList',
        autoLoad:'true',
        storeId:'id_StoreList'
    }
});

型号：

Ext.define('MyApp.model.ModelList', {
    extend: 'Ext.data.Model',
    xtype:'modelList',
    config: {
        fields:['name']
}
});

控制器

Ext.define('MyApp.controller.Main', {
extend : 'Ext.app.Controller',
requires : ['MyApp.view.MyList'],
config : {
    refs : {
        loadbtn:'button[action=loadbtn]',
        dataList: '#id_listitems'


    },
    control : {
        "#dataList": {
            itemtap: 'onListItemTap'
        },
        loadbtn:{
            tap : 'handleloadbtn'
        }

    }

},

handleloadbtn: function(){
    console.log('loadbtn tapped');
    Ext.Viewport.setMasked({xtype:'loadmask',message:'loading...'});
    this.ajaxCall();
},

ajaxCall:function(){
    Ext.Ajax.request({
        method: 'POST',
        scope: this,
        extraParams: {
            Details: true
        },

        url:'http://localhost:9080/works',
        actionMethods: {
            create : 'POST',
            read   : 'POST', // by default GET
            update : 'POST',
            destroy: 'POST'
        },
        headers :{
            "Content-Type" :'application/xml',
            'Accept':'application/json'
        },
        reader:
        {
            type:'json'
        },
        success: function(response){
            console.log('success');

            // var list = Ext.getCmp('id_listitems')
            //var store = Ext.getStore('id_StoreList');
            var store = Ext.data.StoreManager.lookup('id_StoreList');
            this.getDataList().setStore(store);
           //Error : Uncaught ReferenceError: getDataList is not defined 
            console.log('test:',test);
            Ext.Viewport.setMasked(false);
        }
    })
}

}))

名单：

---

有谁能帮我解决这个问题吗？谢谢。

您需要像这样使用

这个.getDataList（）

：

Ext.Ajax.request({
    method: 'POST',
    extraParams: {
        Details: true
    },

    url:'http://localhost:9080/works',
    actionMethods: {
        create : 'POST',
        read   : 'POST', // by default GET
        update : 'POST',
        destroy: 'POST'
    },
    headers :{
        "Content-Type" :'application/xml',
        'Accept':'application/json'
    },
    reader:
    {
        type:'json'
    },
    success: function(response){
        console.log('success');

        // var list = Ext.getCmp('id_listitems')
        //var store = Ext.getStore('id_StoreList');
        var store = Ext.data.StoreManager.lookup('id_StoreList');
        this.getDataList().setStore(store);
       //Error : Uncaught ReferenceError: getDataList is not defined 
        console.log('test:',test);
        Ext.Viewport.setMasked(false);
    },
    scope: this
});

您还需要将

scope:this

添加到请求配置对象中，以便

success

方法中的

this

不是请求，而是控制器

希望这有帮助。

我想你可以试试这个。 你的商店看起来像

Ext.define('MyApp.store.StoreList', {
    extend:'Ext.data.Store',
    requires:['MyApp.model.ModelList'],
    config:{
        model:'MyApp.model.ModelList',
        autoLoad:'true',
         clearOnPageLoad: false,       
        proxy: {
            type: 'jsonp',
            useDefaultXhrHeader: false,
            url: 'http://localhost:9080/works',
            reader: {
                type: 'json',
                rootProperty: "Items" //It depends on your json data structure

            },
            callbackKey: 'callback'
        }
    }
});

在控制器的“handleloadbtn”函数中，您只需调用

Ext.getStore("StoreList").load(); //despite of the config "autoLoad:true"

Ext.getStore("StoreList").load(); //despite of the config "autoLoad:true"