0

所以我试图围绕 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事件处理程序添加到触发自定义事件的按钮和面包屑内部来做到这一点，我会监听自定义事件并继续执行我需要做的任何操作。

在我开始寻找黑客工作之前，我只想以正确的方式做到这一点

4

1 回答 1

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'
}

那你应该好好去！

于 2013-08-06T20:52:54.773 回答