Sencha 2.x MVC：通過id獲取元素

Question

我剛開始使用Sencha framework 2.x.這是我的應用程序：

應用程序/ app.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 
Ext.application({ 
    name: 'App', 
    controllers: ['Generators'], 
    models: [], 
    stores: [], 
    views: ['Main', 'Generator'], 
    launch: function() { 
    Ext.create('App.view.Main'); 
    } 
}); 

應用程序/視圖/ Main.js

Ext.define('App.view.Main', { 
    extend: 'Ext.NavigationView', 
    requires: [ 
    'App.view.Generator' 
    ], 

    config: { 
    fullscreen: true, 
    items: [ 
     { 
     xtype: 'generatorview' 
     } 
    ] 
    } 
}); 

應用程序/視圖/ Generator.js

Ext.define('App.view.Generator', { 
    extend: 'Ext.Container', 
    xtype: 'generatorview', 
    id: 'generator', 
    config: { 
    layout: 'vbox', 
    items: [ 
     { 
     xtype: 'panel', 
     html: 'My message: <a id="xxxSet">Set</a> :: <span id="xxxMsg">...</span>', 
     flex: 1 
     }, 
     { 
     dock: 'bottom', 
     xtype: 'toolbar', 
     items: [] 
     } 
    ] 
    } 
}); 

應用/controller/Generator.js

Ext.define('App.controller.Generators', { 
    extend: 'Ext.app.Controller', 
    config: { 
    refs: {} 
    }, 
    init: function() { 
    this.control({ 
     '#xxxSet': { // QUESTION1 
     tap: 'setMyMessage' 
     } 
    }); 
    }, 

    setMyMessage: function() { 
    '#xxxMsg'.html('Set this message'); // QUESTION2 
    } 
}); 

正如你所看到的，我把問題放在最後一部分（控制器）中。

• 問題1：怎樣可以設置一個抽頭函數到視圖作爲HTML內容限定的元件（#xxxSet） 。
• 問題2：如何將 消息中的元素（#xxxMsg）在視圖中定義爲HTML 內容。

xxxSet =按鈕的ID

消息支架

THX的xxxMsg = ID！

Answer 1

你可以使用Ext#get（它接受一個字符串，它是id），它將返回一個Ext.dom.Element的實例。通過這種方式，您可以使用on方法添加監聽器（很像control），然後使用setHtml方法更新內容。

init: function() { 
    Ext.get('xxxSet').on({ 
     tap: 'setMyMessage', 
     scope: this 
    }); 
}, 

setMyMessage: function() { 
    Ext.get('xxxMsg).setHtml('Hello'); 
} 

Answer 2

如果使用itemId，你不能Ext.get()訪問它。你可以試試Ext.ComponentQuery.query()而不是那個。

init: function() { 
Ext.ComponentQuery.query('#xxxSet').on({ 
    tap: 'setMyMessage', 
    scope: this 
    }); 
}, 

setMyMessage: function() { 
Ext.ComponentQuery.query('#xxxMsg).setHtml('Hello'); 
}