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

Question

I'm developing a little application with Sencha Touch 2 that has a list of items and a page with detailes. The users see the list and tap on an item. An Ajax call is made and the data from the object received should be replace some informations from multiple [Item]s in the detailes container. I'm trying to figure out this update and something I miss... or mybe this is not so simple.

Controller:

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

});

View:

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

Having this view, what is the best approach to dynamically update its content using showSheet function from Controller?

Answer 1

1. Use Ext.navigation.View
2. Use Ext.List instead of xtype : 'container'
3. Wrap your Ajax request into Model/Proxy/Store
4. Assign ajax-ed store to List's store: store;

The changes will be done under the hood.