Sencha touch 2 - 목록 항목 클릭시 새보기를 누르는 방법

Question

NEWS를 클릭하면보기 (카드)를 눌러야합니다. 이게 제 컨트롤러입니다. 내비게이션보기를 사용하지 않습니다. 어떻게해야합니까?

config:{ 
    routes:{ 
     'News/index': 'showNews', 
    }, 
    refs : { 
     main : 'mainpanel', 
    }, 

    control : { 
     'navigation': { 
        select : 'showLanding' 
       } 
      } 
    }, 

    showNews : function(){ 
       this.getMain().add({ 
        xtype: 'blogview' 
        }); 
       }, 
    showLanding : function(list,record) { 
          switch(record.data.navLink){ 

           case "NEWS" : { 
               this.getMain().setActiveItem('blogview');           
               break; 
              } 
           case "PHOTOS" : { 

               this.getMain().push({            
               xtype:'photoview', 
               }); 
               break; 
              } 

          } 
          } 

내비게이션보기에 두 개 이상의 항목을 제공 할 수 없습니다. 수 plz 도움을

미리 감사드립니다. :)

Answer 1

card 레이아웃을 가진 컨테이너에 setActiveItem을 사용할 수 있습니다. 다음은 간단한 예입니다

Ext.setup({ 
    onReady:function(){ 
     var container = Ext.create('Ext.Container', { 
      layout: 'card', 
      items: [ 
       { 
        items: [ 
         { 
          xtype: 'button', 
          text: 'Tap this to add a new view', 
          handler: function() { 
           container.setActiveItem({ 
            html: 'This is the new item.' 
           }); 
          } 
         } 
        ] 
       } 
      ] 
     }); 

     Ext.Viewport.add(container); 
    } 
}); 

그리고 당신은 layout 구성을 지정하여 애니메이션을 추가 할 수 있습니다 완전한 존재로

layout: { 
    type: 'card', 
    animation: { 
     type: 'slide', 
     direction: 'left', 
     duration: 1000 
    } 
} 

:

Ext.setup({ 
    onReady:function(){ 
     var container = Ext.create('Ext.Container', { 
      layout: { 
       type: 'card', 
       animation: { 
        type: 'slide', 
        direction: 'left', 
        duration: 1000 
       } 
      }, 
      items: [ 
       { 
        items: [ 
         { 
          xtype: 'button', 
          text: 'Tap this to add a new view', 
          handler: function() { 
           container.setActiveItem({ 
            html: 'This is the new item.' 
           }); 
          } 
         } 
        ] 
       } 
      ] 
     }); 

     Ext.Viewport.add(container); 
    } 
}); 

Answer 2

1)에 ID를 할당 뷰를 변경하고 싶은 컨테이너

2) 컨트롤러에서 ID로 컨테이너에 대한 참조를 가져온 다음 적절한 방법을 호출하여보기를로드하십시오. 당신이 당신의 컨테이너로 Navigation.View를 사용하는 경우

는 예를 들어, 원하는보기를로드하는 푸시 메소드를 호출

Ext.ComponentManager.get('mynavigationview').push({ 
     title: 'Second', 
     html: 'Second view!' 
     }); 

당신의 필요가 내선 '로'Ext.ComponentManager.get '를 사용하는 것이 있습니다. get '은 Component에서 작동하지 않습니다.

Answer 3

다음은 내가 가지고있는 컨트롤러의 예입니다. 그래도 onListItemTap 메서드에서 여분의 코드를 제거했습니다.

참조가 실제로 작동하는지 확인하십시오. 당신의 'mainPanel는'탐색보기 인 경우,이 같은 새로운 항목을 밀어 수 있습니다

Ext.define('MyApp.controller.MyController', { 
extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     mainPanel: 'main' 
    }, 

    control: { 
     "list": { 
      itemtap: 'onListItemTap' 
     } 
    } 
}, 

onListItemTap: function (dataview, index, target, record, e, options) { 
    var myView = Ext.create('Ext.Container', { 
    ... 
    ... 
    }); 

    this.getMainPanel().push(myView); 
} 

}); 

당신의 mainPanel,이 같은 작업을해야합니다 :

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.navigation.View', 
    xtype: 'main', 

    config: { } 
});