Sencha 2.x MVC：idで要素を取得

Question

Senchaフレームワーク2.xを使い始めました。これは私のアプリです：

アプリ/

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: [] 
     } 
    ] 
    } 
}); 

アプリをapp.js /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 
    } 
}); 

ご覧のとおり、最後の部分（コントローラ）に質問があります。

• QUESTION1：ビューでHTMLコンテンツとして定義された要素（#xxxSet） にタップ機能を設定するにはどうすればよいですか。
• 質問2： というメッセージに、ビューで定義された要素（#xxxMsg）をHTML という内容で設定するにはどうすればよいですか。メッセージホルダーの

xxxSet =ボタンのID

xxxMsg = ID

Thxを！

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