如何在Sencha touch 2中使用Ajax数据更新单个视图容器项html

How to update individual view container items html in Sencha Tocuch 2 using Ajax data

本文关键字:单个 更新 数据 视图 html Ajax Sencha touch      更新时间:2023-09-26

我正在用Sencha Touch 2开发一个小应用程序,它有一个项目列表和一个详细信息页面。用户看到列表并点击一个项目。发出一个Ajax调用,接收到的来自对象的数据应该替换来自details容器中的多个[Item]的一些信息。我想弄清楚这个更新和我错过的东西…或许这并没有那么简单。

控制器:

Ext.define('FA.controller.Clients', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            exitButton  : 'clients button[action=logout]',
            mainTab     : 'main',
            clientsList : '#clientsContainer',
            backToList  : 'fisa button[action="clients-list"]',
            clientSheet : 'fisa',
        },
        control: {
            clientsList : {
                onTapClient: 'showSheet'
            },
            backToList  : {
                tap: 'showList'
            }
        },
        store: [
            // 'FA.store.clients.Data',
        ]
    },
    showSheet: function(client) {
        this.getMainTab().setActiveItem('fisa');         
        console.log(client);
    }
});

视图:

Ext.define('FA.view.Fisa', {
    extend  : 'Ext.Container',
    xtype   : 'fisa', 
    requires: [
        'Ext.TitleBar',
        'Ext.dataview.List'
    ],    
    config: {
        layout          : 'fit',
        styleHtmlContent: true,
        styleHtmlCls    : 'fisa', 
        itemId          : 'fisaClient',
        items           : [
            {
                xtype   : 'titlebar',
                docked  : 'top',
                title   : 'Fisa Client',
                items   : [
                    {
                        cls     : 'back',
                        iconCls : 'bars',
                        action  : 'clients-list',
                        ui      : 'plain',
                        align   : 'left'
                    }
                ]    
            },
            {
                xtype   : 'container',
                html    : '<div class="sheet-title" id="sheet-title">{fullname}</div>',
            },
            {
                xtype   : 'container',
                scrollable  : 'vertical',
                margin  : '53 0 0 0',
                html    : [
                            '<div class="fa-item-wraper">',
                            '   <div class="element-title">',
                            '       Detail Field 1',
                            '   </div>',
                            '   <div class="element-content">',
                            '       {client detail field 1 goes here via ajax}',
                            '   </div>',
                            '</div>',
                            '<div class="fa-item-wraper">',
                            '   <div class="element-title">',
                            '       Detail Field 2',
                            '   </div>',
                            '   <div class="element-content">',
                            '       {client detail field 2 goes here via ajax}',
                            '   </div>',
                            '</div>'
                          ].join('')
            }
        ]            
    }
});
有了这个视图,使用showSheet函数从控制器动态更新其内容的最佳方法是什么?

  1. 使用Ext.navigation.View
  2. 使用Ext.List代替xtype : 'container'
  3. 将Ajax请求封装到Model/Proxy/Store
  4. 将ajax store分配给List的store: store;