Sencha事件处理和视图操作

Question

因此，我试图围绕Sencha Touch中使用的MVC设计模式进行研究。 我有主见

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

所以让我们说在views/Overview.js内部：

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

基本上，当按下开始按钮时，我想更新breadcrumb视图中的一些文本。

我来自appcelerator背景，可以通过向click按钮中添加一个click事件处理程序来触发自定义事件并在面包屑内部进行操作，我会监听自定义事件并继续执行我需要做的任何操作。

我只是想以正确的方式进行操作，然后再开始寻找黑客工作

Answer 1

我在这里遵循的过程是：

1. 在控制器中添加对面包屑对象的引用。
2. 将事件处理程序（“控制器操作”）添加到侦听“开始”按钮上的单击（轻击）的同一控制器。
3. 在事件处理程序中采取适当的措施。

像这样的控制器：

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...

    }

});

请注意，要使其正常工作，您必须为组件提供ID。 例如，在创建面包屑时，您可以执行以下操作：

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

那你应该很好走！