переключения между видами в сенче прикосновении

Question

Я следующий код вида в сенче контакте 2

Ext.define('WL.view.Categories', { 

extend: 'Ext.Container', 

requires: [ 
    'Ext.SegmentedButton', 
    'WL.view.movie.List', 
    'Ext.form.Panel', 
    'Ext.plugin.ListPaging', 
    'Ext.TitleBar', 
    'WL.view.movie.SortBar', 
    'WL.view.movie.SearchBar' 
], 
    xtype: 'categories', 

config: { 

    layout: { 
     type: 'card', 
     animation: { 
      type: 'fade' 
     } 
    }, 

    items: [ 
     { 
      docked: 'top', 
      xtype: 'toolbar', 
      cls: 'small withBg', 
      title: 'Merchants', 
      items: [ 
       /* { 
        xtype: 'segmentedbutton', 
        allowDepress: false, 
        items: [ 
        /* 
         { 
          cls: 'movies', 
          iconCls: 'movies', 
          pressed: true 
         }, 
         { 
          xtype: 'button', 
          cls: 'friends', 
          iconCls: 'friends' 
         } 
        ] 
       }, 
       */ 
       { xtype: 'spacer' }, 
       { 
        xtype: 'button', 
        cls: 'searchBtn', 
        iconCls: 'search', 
        align: 'right' 
       }, 
       { 
        xtype: 'button', 
        cls: 'backBtn', 
        id: 'movieBackButton', 
        align: 'left' 
       } 
       /* 
       { 
        xtype: 'component', 
        cls: 'fbProfilePic', 
        id: 'fbProfilePic', 
        tpl: '<img src="https://graph.facebook.com/{profileId}/picture?type=square" />' // the img source can be later changed 
       } 
       */ 
      ] 
     }, 
     { 
     xtype:'list', 
     store: 'Merchants',  
     plugins: [ 
     { xclass: 'Ext.plugin.ListPaging' } 
     ], 

     itemCls: 'expandedMovie', 
     itemHeight:114, 

     items: [ 
     { xtype: 'movieSortBar' , docked:'top'}, 
     { xtype: 'movieSearchBar' , docked:'top' , hidden:true},  
     { 
      xtype: 'container', 
      cls: 'promo', 
      itemId:'promo-container', 
      docked:'bottom', 
      html: '<span class="logo"></span>Brought to you by Sencha Touch 2.1 <button>Learn More</button>' 
     } 
    ], 

    loadingText: null, 

    listeners: { 
     order: 'before', 
     select: function() { 
      return false; 
     }, 
     itemtap: function(dataview, index, target, record, evt) { 

      var el = Ext.get(evt.target), 
       fireEvent; 

      if (el.dom.nodeName == 'B') el = el.parent(); 

      WL.currentMovie = record; 

      if (el.hasCls('seen')) { 
       fireEvent = el.hasCls('selected') ? 'unSeen' : 'seen'; 
       el.toggleCls('selected'); 
      } else if (el.hasCls('want')) { 
       fireEvent = el.hasCls('selected') ? 'unWantToSee' : 'wantToSee'; 
       el.toggleCls('selected'); 
      } else if (el.hasCls('thumb') && el.hasCls('up')) { 
       fireEvent = el.hasCls('selected') ? 'unLike' : 'like'; 
       el.toggleCls('selected'); 
      } else if (el.hasCls('thumb') && el.hasCls('down')) { 
       fireEvent = el.hasCls('selected') ? 'unDislike' : 'dislike'; 
       el.toggleCls('selected'); 
      } else { 
       fireEvent = 'tapMovie'; 
      } 

      if (fireEvent) { 
       this.fireEvent(fireEvent, record, el); 
      } 
     } 
    }, 
    itemTpl: Ext.create('Ext.XTemplate', 
     '<div class="moreArrow"></div>', 
     '<div class="img"><img src="http://localhost/WL2/assets/rest/{image}" /></div>', 
     '<div class="meta">', 
      '<h3>{merchName}</h3>', 
      '<div class="actions">', 
       //'<div class="rating"><span>{% if (values.criticRating >= 0) { %}{criticRating}%{% } else { %}?{% } %}</span></div>', 
       '<button class="seen{[values.seen ? " selected" : ""]}">{action}</button>', 
       '{% if (values.seen) { %}', 
        '<button class="thumb up{[values.like ? " selected" : ""]}"><b></b></button>', 
        '<button class="thumb down{[values.dislike ? " selected" : ""]}"><b></b></button>', 
       '{% } else { %}', 
        '<button class="want{[values.wantToSee ? " selected" : ""]}">Want to Go There</button>', 
       '{% } %}', 
      '</div>', 

     '</div>' 
    ) 

    }  // end of the categories list 
    ] 
}, 

initialize: function() { 
    this.callParent(); 

    // Enable the Tap event on the profile picture in the toolbar, so we can show a logout button 
    var profilePic = Ext.getCmp('fbProfilePic'); 
    if (profilePic) { 
     profilePic.element.on('tap', function(e) { 
      profilePic.fireEvent('tap', profilePic, e); 
     }); 
    } 
} 
}); 

Я определил xtype на мой взгляд, так что я могу сослаться на него в моем коде контроллера

это мой код контроллера

Ext.define('WL.controller.Categories', { 
extend: 'Ext.app.Controller', 

config: { 
    refs: {  
     categories: 'categories', 
     List: 'list' 
    }, 

    control: { 
     list: { 
      tapMovie: 'onMovieTap'  // the function that will be created when a movie is tapped 
     } 

     } 

}, 
slideLeftTransition: { type: 'slide', direction: 'left' }, 
    slideRightTransition: { type: 'slide', direction: 'right' }, 

onMovieTap: function() { 
    Ext.Viewport.animateActiveItem(this.getCategories(),this.slideRightTransition);     
} 
}); 

моя основная проблема заключается в том, что функция прибудет getCategories() в контроллере не работает, так что я могу перейти на мой взгляд, со скользящим эффектом правого, я думаю, что моя проблема заключается в определении xtype, можете ли вы дать мне подсказку по определению правильного типа xtype, давая мне попробовать использовать alias:widget.categories, но он тоже не работал.

Answer 1

Ваш конфиг должен выглядеть следующим образом:

config: { 
    refs : { 
     categories : { 
      autoCreate: true, 
      selector: '#categories_itemId', 
      xtype: 'categories' 
     }, 
     List : { 
      // do the same thing for 'List' 
     } 
    }, 
    control: { 
     ... 
    }, 
    ... 
}, 
... 

Обратите внимание, что селектор является itemId вашей view так дайте categories view в Itemid (вы можете видеть, что я только что сделал один вверх).