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