Sencha事件处理和视图操作

Question

So I'm trying to wrap my head around the MVC design patter used in Sencha Touch. I have my main view

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

So let's say inside views/Overview.js I have:

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

Basically when the start button is pressed, I want to update some text in the breadcrumb view.

I come from an appcelerator background and I would do this by adding a click event handler to the button firing a custom event and inside breadcrumb, I would listen to for the custom event and proceed to do whatever manipulations I need to do.

I just want to do this the right way before I start finding hack jobs

Answer 1

The procedure I would follow here is:

1. Add a reference to your breadcrumb object in a controller.
2. Add an event handler (Controller Action) to the same controller that listens for the click (tap) on your start button.
3. Take appropriate action in the event handler.

Something like this for a controller:

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

    }

});

Note that for this to work, you'll have to give ids to your components. For example, when creating the breadcrumbs, you can do the following:

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

Then you should be good to go!