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事件处理程序来触发一个自定义事件和面包屑导入内部的按钮，我会倾听自定义事件并继续执行我需要做的任何操作。

我只是想在我开始寻找黑客工作

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

    } 

}); 

需要注意的是这个工作，你得给IDS将组件。例如，在创建面包屑时，您可以执行以下操作：

然后您应该很好去！