如何使用按鈕更改Sencha Touch 2中的視圖？

我在寫一個Sencha Touch 2應用程序，並且在切換視圖時遇到問題。我有兩個視圖（LoginPanel和RegisterPanel），我想通過單擊按鈕從LoginPanel切換到RegisterPanel。我想使用「makeAccount」按鈕進入RegisterPanel視圖。我已經嘗試了很多技巧，但唉，沒有人工作。這裏是我的代碼：如何使用按鈕更改Sencha Touch 2中的視圖？

app.js

Ext.application({ 
name: 'kody2', 

requires: [ 
    'Ext.MessageBox' 
], 

controllers: [ 
    'Main' 
], 

views: [ 
    'HomeContainer', 
    'LoginPanel', 
    'Produkty', 
    'Start', 
    'SkanujKod', 
    'Opcje', 
    'KatalogPDF', 
    'RegisterPanel', 
    'SimpleProduct', 
    'ForgotPassword' 
], 

viewport: { 
    layout: { 
     type: 'card', 
     animation: { 
      type: 'fade', 
      direction: 'left', 
      duration: 300 
     } 
    } 
}, 

icon: { 
    '57': 'resources/icons/Icon.png', 
    '72': 'resources/icons/Icon~ipad.png', 
    '114': 'resources/icons/[email protected]', 
    '144': 'resources/icons/[email protected]' 
}, 

isIconPrecomposed: true, 

startupImage: { 
    '320x460': 'resources/startup/320x460.jpg', 
    '640x920': 'resources/startup/640x920.png', 
    '768x1004': 'resources/startup/768x1004.png', 
    '748x1024': 'resources/startup/748x1024.png', 
    '1536x2008': 'resources/startup/1536x2008.png', 
    '1496x2048': 'resources/startup/1496x2048.png' 
}, 

launch: function() { 
    // Destroy the #appLoadingIndicator element 
    Ext.fly('appLoadingIndicator').destroy(); 

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('kody2.view.HomeContainer')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version. Reload now?", 
     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     } 
    ); 
}

}）;

LoginPanel.js

Ext.define('kody2.view.LoginPanel', { 
extend: 'Ext.Panel', 
xtype: 'loginpanel', 

config: { 
    title: 'Twoje konto', 
    iconCls: 'user2', 

    styleHtmlContent: true, 
    scrollable: true, 
    items: [ 
     { 
      xtype: 'fieldset', 
      id: 'formContent', 
      title: 'Zaloguj się', 
      items: [ 

       { 
        xtype: 'emailfield', 
        name: 'login', 
        id: 'email_login', 
        label: 'Login' 
       }, 
       { 
        xtype: 'passwordfield', 
        name: 'password', 
        id: 'form_password', 
        label: 'Hasło' 
       }, 
       { 
        xtype: 'button', 
        text: 'Załóż konto', 
        id: 'makeAccount', 
        action: 'register' 
       }, 
       { 
        xtype: 'button', 
        text: 'Zapomniałem hasło', 
        id: 'forgotPassword' 
       }, 
       { 
        xtype: 'button', 
        text: 'Zaloguj', 
        id: 'logowanie' 
       } 
      ] 
     } 

    ] 

}

}）;

和控制器：

Ext.define('kody2.controller.Main', { 
extend: 'Ext.app.Controller', 

config: { 
    control: { 
     'button[action=register]': { 
       tap: 'myFunction' 
      } 
     } 
    }, 

myFunction: function() { 
    Ext.Viewport.add({ 
     xtype: 'register' 
    }); 
}

}）;

感謝您的幫助！

來源

2013-09-30 Paweł Dukarski

您只需在視口中添加註冊視圖，但不能將其設置爲活動項目。

Ext.Viewport.setActiveItem({xtype:'register'});

上方行將在視口中添加註冊視圖，並設置爲ActiveItem。

更新

Ext.define('kody2.controller.Main', { 
    extend: 'Ext.app.Controller', 
    config: { 
     control: { 
      'button[action=register]': { 
       tap: 'myFunction' 
      } 
     } 
    }, 
    myFunction: function() { 
     Ext.Viewport.setActiveItem({ xtype: 'register' }); 
     console.log(Ext.Viewport.getActiveItem().xtype); 
    } 
});

來源

2013-09-30 11:08:15 Viswa

不幸的是，它這麼想的工作。 –

它顯示錯誤？ – Viswa

控制檯顯示沒有錯誤，但該屬性不起作用。 –

如何使用按鈕更改Sencha Touch 2中的視圖？

回答

相關問題