컨트롤러에서 Sencha Touch의 표시된 카드 변경하기

Question

로그인 한 후에는 로그인 페이지를 대시 보드 페이지로 바꾸기를 원하지만 어떤 이유로 인해 카드를 바꿀 수 없으므로 참조 할 수 없습니다. 그것은 setActiveItem 메소드를 받아 들일 것입니다.

는 app.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    views: [ 
     'MainPanel' 
    ], 
    name: 'MyApp', 
    controllers: [ 
     'MainController' 
    ], 

    launch: function() { 

     Ext.create('MyApp.view.MainPanel', {fullscreen: true}); 
    } 

}); 

MainController.js

Ext.define('MyApp.controller.MainController', { 
    extend: 'Ext.app.Controller', 
    alias: 'controller.mainController', 

    config: { 
    }, 

    init: function(application) { 
     this.control({ 
      'button[action=submitSigninemEmail]': { 
       tap: 'signinemEmailFnc' 
      } 
     }); 
    }, 

    signinemEmailFnc: function() { 

     var email_fld = Ext.getCmp('signinemEmail').getValue(); 
     var password_fld = Ext.getCmp('signinemPassword').getValue(); 

     var md5password = MD5(password_fld); 

     Ext.data.JsonP.request({ 
      url: 'http://www.solumac.co.uk/clients/uwana/v2/ajax/sencha.php', 
      params: { 
       method: 'signinem', 
       callback: 'signinem', 
       email: email_fld, 
       password: md5password 
      }, 
      callback: function(result, params) { 
       if (result === true) { 
        if (params.status === true){ 
         console.log('signed in'); 
         MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'}); 
        } else { 
         console.log(params.message); 
        } 
       } 
      } 
     }); 

    } 
}); 

MainPanel.js 나는 문제가 라인 거짓말을 믿고

Ext.define('MyApp.view.MainPanel', { 
    extend: 'Ext.Panel', 
    alias: 'widget.mainPanel', 

    config: { 
     layout: { 
      type: 'card' 
     }, 
     items: [ 
      { 
       xtype: 'container', 
       id: 'signinem', 
       layout: { 
        type: 'fit' 
       }, 
       items: [ 
        { 
         xtype: 'titlebar', 
         docked: 'top', 
         id: 'signinemTitleBar', 
         title: 'Sign In', 
         items: [ 
          { 
           xtype: 'button', 
           id: 'signinemButtonBack', 
           ui: 'back', 
           text: 'Back' 
          }, 
          { 
           xtype: 'button', 
           align: 'right', 
           id: 'signinemButtonSignUp', 
           text: 'Sign Up' 
          } 
         ] 
        }, 
        { 
         xtype: 'container', 
         id: 'signinemPadding', 
         padding: 10, 
         width: '100%', 
         items: [ 
          { 
           xtype: 'fieldset', 
           id: 'signinemFacebookSet', 
           title: 'Sign In with Facebook', 
           items: [ 
            { 
             xtype: 'button', 
             id: 'signinemFacebook', 
             margin: 10, 
             width: '', 
             text: 'Facebook' 
            } 
           ] 
          }, 
          { 
           xtype: 'fieldset', 
           id: 'signinemEmailSet', 
           title: 'Sign In with Email', 
           items: [ 
            { 
             xtype: 'textfield', 
             id: 'signinemEmail', 
             margin: 10, 
             label: 'email' 
            }, 
            { 
             xtype: 'passwordfield', 
             id: 'signinemPassword', 
             margin: 10, 
             label: 'Password' 
            }, 
            { 
             xtype: 'checkboxfield', 
             action: 'changeField', 
             id: 'signinemShow', 
             itemId: 'mycheckbox', 
             margin: 10, 
             label: 'show password', 
             labelWidth: '80%' 
            }, 
            { 
             xtype: 'button', 
             action: 'submitSigninemEmail', 
             id: 'signinemSubmit', 
             margin: 10, 
             text: 'Submit' 
            } 
           ] 
          } 
         ] 
        } 
       ] 
      }, 
      { 
       xtype: 'container', 
       id: 'dashboard', 
       layout: { 
        type: 'fit' 
       }, 
       items: [ 
        { 
         xtype: 'titlebar', 
         docked: 'top', 
         id: 'dashboardBar', 
         title: 'Dashboard' 
        } 
       ] 
      }, 
     listeners: [ 
      { 
       fn: 'onSigninemShowCheck', 
       event: 'check', 
       delegate: '#signinemShow' 
      }, 
      { 
       fn: 'onSigninemShowUncheck', 
       event: 'uncheck', 
       delegate: '#signinemShow' 
      } 
     ] 
    }, 

    onSigninemShowCheck: function(checkboxfield, e, options) { 
     alert('show password'); 
    }, 

    onSigninemShowUncheck: function(checkboxfield, e, options) { 
     alert('hide password'); 
    } 

}); 

...

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'}); 

... 작동하지 않지만 대체해야 할 부분에 대해 완전한 공백을 그었습니다. 당신이

Ext.create('MyApp.view.MainPanel', {fullscreen: true}); 

컨트롤러 변화에 다음 app.js에

Ext.Viewport.add(Ext.create('MyApp.view.MainPanel')); 

,

에

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'}); 

로 변경하는 경우

Answer 1

Ext.Viewport.setActiveItem(Ext.create('dashboard'),{ 
// other stuff 
}); 

나는 당신이 위처럼 그냥 ID 문자열의 setActiveItem 할 수 없습니다

Answer 2

일을한다고 생각 app.js에 귀하의 의견 배열에 대시 보드를 추가

MyApp.views.MainPanel.setActiveItem('dashboard', {type:'slide', direction:'left'}); 

먼저에있다 Ext.getCmp()를 사용하여 구성 요소에 대한 참조를 가져옵니다.

또한 MyApp.views.MainPanel은 인스턴스가 아닌 클래스 이름입니다. 특정 인스턴스 객체를 가져와 활성화 된 항목을 설정해야합니다.

var mypanel = Ext.ComponentQuery('mainPanel')[0]; 
var active = Ext.getCmp('dashboard'); 
mypanel.setActiveItem(active, {type: 'slide', direction: 'left'}); 

을 나는 또한 당신이 원하는 않는 한 파일 응용 프로그램을 포함하고 있습니다 : 여기

당신을 위해 작동합니다 몇 가지 코드의

Ext.define('MyApp.view.MyPanel', { 
    extend: 'Ext.Panel', 
    alias: 'widget.mypanel', 

    config: { 
     layout: { 
      type: 'card' 
     }, 
     items: [ 
      { 
       xtype: 'titlebar', 
       docked: 'top', 
       items: [ 
        { 
         xtype: 'button', 
         handler: function(button, event) { 
          var comp = Ext.ComponentQuery.query('mypanel')[0]; 
          var active = Ext.getCmp('c1'); 
          comp.setActiveItem(active); 
         }, 
         text: 'one' 
        }, 
        { 
         xtype: 'button', 
         handler: function(button, event) { 
          var comp = Ext.ComponentQuery.query('mypanel')[0]; 
          var active = Ext.getCmp('c2'); 
          comp.setActiveItem(active); 
         }, 
         text: 'two' 
        } 
       ] 
      }, 
      { 
       xtype: 'container', 
       html: 'Hello, first container', 
       id: 'c1' 
      }, 
      { 
       xtype: 'container', 
       html: 'hello, second container', 
       id: 'c2' 
      } 
     ] 
    } 

});