1

I'm using, or abusing, Sencha Touch for the first time and I just want to push a list view, when i click a button. Here is my view: 

Ext.define('TouchNuts.view.Decision', {
extend: 'Ext.Panel',
xtype: 'decision',

config: {
    title: 'Decision',

    scrollable: true,
    styleHtmlContent: true,
    styleHtmlCls: 'Decision',
    tpl: '<h2>{name}</h2>, <h3>{description}<h3>, <h4>{price:ellipsis(15)}</h4> <h1>you can do this </h1>',



        items: [

                        {
                        xtype: 'button',
                        text: 'SEND',
                        ui: 'confirm',
                        docked: 'bottom',
                        action:  'doSomething'
                        }
               ]
         }
 });

Here is the view I'd like to push: 

Ext.define('TouchNuts.view.File', {
extend: 'Ext.Panel',
xtype: 'file',

config: {
    title: 'File',
    iconCls: 'star',
    layout: 'fit',
            items: [
                {
                        xtype: 'list',
                        id: 'file',
                        store: 'TransactionStore',
                        itemTpl: '<h2>{name:ellipsis(15)}</h2>, <h3>{description:ellipsis(8)}<h3>, <h4>{price:ellipsis(15)}</h4>',
                        itemCls: 'SummaryItems'
                }
            ]
    }
});

And here is my controller: 

Ext.define('TouchNuts.controller.doSomething', {
extend: 'Ext.app.Controller',

config: {
    refs: {

    },
        control: {
          'button[action=doSomething]' : {
             tap: function() {
               getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');

             }
         }

}
}
});

I'm pretty good with HTML, CSS, and jQuery, but new to JS and totally clueless when it comes to Sencha so any advice is appreciated.

4

2 回答 2

2

最好给你的视图一个 itemId 以便在你的控制器中引用它们。例如：

TouchNuts.view.Decision可以有一个 itemId：decisionPanel

和

TouchNuts.view.File可以有一个 itemId：filePanel

现在在你的Controller你会这样做：

...
config: {
    refs: {
       decisionPanel: {
           autocreate: true,
           selector: '#decisionPanel',
           xtype: 'decision'
       },    
       filePanel: {
           autocreate: true,
           selector: '#filePanel',
           xtype: 'file'               
       }
    },
    control: {
      'button[action=doSomething]' : {
         tap: 'onButtonTap'
     }

}

onButtonTap : function(button, e, options) {
    var me = this;
    Ext.Viewport.setActiveItem(me.getDecisionPanel());
}
...

你会注意到我曾经getDecisionPanel()得到这个decisionPanel视图。这是因为会为您指定的每个自动生成一个 getter 函数，ref并且为了访问它，您需要使用新的get+ 大写ref名称。更多信息在这里：http ://docs.sencha.com/touch/2-1/#!/api/Ext.app.Controller

于 2013-02-03T06:19:52.963 回答
1

代替

getMainView('TouchNuts.view.Decision').push('TouchNuts.view.File');

您必须先创建视图，然后将其推送到视图

getMainView('TouchNuts.view.Decision').push(Ext.create('TouchNuts.view.File'));
于 2013-02-03T10:46:27.640 回答