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

Posted 2023-02-26

【中文标题】Sencha Touch：如何更新数据存储以从控制器列出

【英文标题】：Sencha Touch: how to Update data Store to list from controller

【发布时间】：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'
                ]
            
        ]
    
);

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

【参考方案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"