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將組件。例如，在創建麪包屑時，您可以執行以下操作：

然後您應該很好去！