Manipulation des événements Sencha et manipulation des vues

Question

Je suis donc en train d'essayer de comprendre le motif de conception MVC utilisé dans Sencha Touch. J'ai moi principale

//-- views/Main.js 
Ext.define('PlanningTool.view.Main', { 
    extend: 'Ext.Container', 
    xtype: 'main', 

    config: { 
    layout:'vbox', 
    items:[ 
    { 
     html:'<p><span class="title-text">Door Weight Estimator &amp; Parts Calculator</span><img class="logo" src="resources/images/logo.png" /></p>', 
     cls:'title' 
    }, 
    { 
     xtype:'overview' //-- views/Overview.js 
    }, 
    { 
     xtype:'action' //-- views/action.js 
    }, 
    { 
     xtype:'breadcrumb' //-- views/breadcrumb.js 
    }] 
    } 
}); 

Alors disons que l'intérieur views/Overview.js je:

//-- views/Overview.js 
Ext.define('PlanningTool.view.Overview', { 
     extend: 'Ext.Panel', 
     xtype: 'overview', 
     config: { 
      cls:'overview', 
      flex:3, 
      items: [ 
      { 
       xtype:'button', 
       text:'Start Estimator', 
       ui:'action', 
       cls:'start-button' 
      }] 
     } 
    }); 

Fondamentalement, lorsque le bouton de démarrage est enfoncé, je veux mettre à jour un texte dans la vue breadcrumb. Je viens d'un arrière-plan appcelerator et je le ferais en ajoutant un gestionnaire d'événements click au bouton de déclenchement d'un événement personnalisé et à l'intérieur du fil d'Ariane, j'écouterais l'événement personnalisé et procéderais à toutes les manipulations nécessaires .

Je veux juste faire de la bonne façon avant que je commence à trouver un emploi hack

Answer 1

La procédure que je suivrais ici est:

1. Ajouter une référence à votre objet d'ariane dans un contrôleur.
2. Ajoutez un gestionnaire d'événement (Action du contrôleur) au même contrôleur qui écoute le clic (touchez) sur votre bouton de démarrage.
3. Effectuez l'action appropriée dans le gestionnaire d'événements.

Quelque chose comme ça pour un contrôleur:

Ext.define('MyApp.controller.BreadcrumbController', { 
    extend: 'Ext.app.Controller', 

    refs: [ 
     { 
      ref: 'breadcrumbs', 
      selector: '#breadcrumbs' 
     } 
    ], 

    init: function(application) { 
     this.control({ 
      "#start-button": { 
       click: this.onStartClicked 
      } 
     }); 
    }, 

    onStartClicked: function(button, e, eOpts) { 
     var bc = this.getBreadcrumbs(); 

     // do whatever to the bc object to update, etc... 

    } 

}); 

Notez que pour que cela fonctionne, vous devrez donner ids à vos composants. Par exemple, lors de la création des miettes de pain, vous pouvez effectuer les opérations suivantes:

{ 
    xtype:'overview', 
    id: 'overview' 
}, 
{ 
    xtype:'action', 
    id: 'start-button' 
}{ 
    xtype:'breadcrumb', 
    id: 'breadcrumbs' 
} 

alors vous devriez être bon d'aller!