Sencha 2.x MVC: Obtenez un élément par identifiant

Je viens de commencer à utiliser Sencha framework 2.x. C'est mon application:

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

App / view / Main.js

 Ext.define('App.view.Main', { extend: 'Ext.NavigationView', requires: [ 'App.view.Generator' ], config: { fullscreen: true, items: [ { xtype: 'generatorview' } ] } }); 

App / view / 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 / 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 } }); 

Comme vous pouvez le voir, j'ai posé des questions dans la dernière partie (contrôleur).

  • QUESTION1: Comment puis-je définir une fonction de prise à l'élément (#xxxSet) définie dans la vue en tant que contenu HTML.
  • QUESTION2: Comment puis-je définir un message l'élément (#xxxMsg) défini dans la vue en tant que contenu HTML.

XxxSet = id d'un bouton

XxxMsg = id d'un support de message

THX!

Vous pouvez utiliser Ext # get (qui accepte une chaîne qui est l' id ) qui renverra une instance de Ext.dom.Element . Avec cela, vous pouvez utiliser la méthode on pour ajouter des auditeurs (tout comme le control ) et ensuite la méthode setHtml pour mettre à jour le contenu.

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

Si vous utilisez itemId , vous ne pouvez pas l'accéder avec Ext.get() . Vous pouvez essayer Ext.ComponentQuery.query() au lieu de cela.

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