Sencha Touch：如何更新数据存储以从控制器列出答案

【问题标题】：Sencha Touch: how to Update data Store to list from controllerSencha Touch：如何更新数据存储以从控制器列出
【发布时间】：2013-04-12 09:30:54
【问题描述】：

从控制器更新列表时遇到问题。我有商店、模型和列表来显示 Json 数据。能够获取数据但无法更新列表。如果我的商店中的 ajax 调用能够使用列表进行数据处理，但不会调用列表器。所以我将代码移动到控制器。这是我的商店：

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

});

列表：

Ext.define('MyApp.view.MyList',{
    extend:'Ext.Panel',
    xtype:'myList',
    requires:['Ext.dataview.List'],
    config:{
        layout:'fit',
        styleHtmlContent:'true',
        styleHtmlCls:'showListCls',
        items:[
            {
                docked:'top',
                items:[
                    {
                        xtype:'button',
                        text:'Load',
                        ui:'Plain',
                        action:'loadbtn',
                        width:'180px',
                        height:'30px',
                        docked:'right',
                        margin : '5 15 5 0'
                    }
                ]
            },
            {
                xtype:'list',
                id: 'id_listitems',
                action:'list_Item_Action',
                store:'StoreList',
                itemTpl:['{name}'
                ]
            }
        ]
    }
});

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

【问题讨论】：

标签： ajax extjs4 sencha-touch sencha-touch-2.1

【解决方案1】：

你需要像这样使用this.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 不是请求而是您的控制器。

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

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'
        }
    }
});

在Controller的“handleloadbtn”函数中，你可以直接调用

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

【讨论】：