sencha-touch-2 - 参照を取得してそれに基づいて行動する方法は? 煎茶タッチ 2.0

Question

以下に示すコード。私は単純なチャット アプリを実装しようとしています。ここのリストは、メッセージのメモリ内ストレージです。this.getMsgList().add([myPanel]);リストの後にまだ新しいアイテムがないことがわかりました。

msgList 参照を取得し、それに新しい参照を追加する正しい方法を探しています (できれば imm に)

Ext.define('Chat.controller.Main', {
extend: 'Ext.app.Controller',

views: ['MainView'],

config: {
    refs: {
        msgBox: '#msgBox',
        msgList: '#msgList'
    }
},

    init: function () {
    console.log('controller inited.')
    this.control({
        'button[action=submitMsg]':{
            tap: 'submitMsgToServer'
        }
    });
},

submitMsgToServer: function() {
    console.log('submitMsgToServer')
    var msg = this.getMsgBox()
    //Ext.Msg.alert(msg)
    //console.log(this.getMsgBox())
    var myPanel = Ext.create('Ext.Panel', {
        data: [ {string: msg} ]
    });

    this.getMsgList().add([myPanel]);
    console.log(this.getMsgList())
}

});

msgList は次のように定義されています。

Ext.define('Chat.view.MainView', {
extend: 'Ext.Panel',

config: {

    layout: {
        type: 'fit'
    },

    items: [
        {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Chat'
        },
        {
            docked: 'bottom',
            xtype: 'toolbar',
            items: [
                { 
                    xtype: 'textfield', 
                    id: 'msgBox'
                },
                { 
                    xtype: 'button',
                    ui: 'confirm',
                    text: 'send',
                    action: 'submitMsg'
                }
            ]
        },
        {
            xtype: 'list',
            id: 'msgList',
            itemTpl: [
                '<div>List Item {string}</div>'
            ],
            data: [
                        { string: 'Item 1' },
                        { string: 'Item 2' }
            ]
        }
    ]


}

});