PDA

View Full Version : Replace a panel with another one in the viewport



sj_tt6
3 Mar 2014, 9:08 PM
Hi,

I have a viewport that its layout is border. In the center region I have a form panel for login. If the user clicks the 'registration' button in this form to register a new account, I want to replace this login form panel with a registration form panel. How can I do it?

Thanks,

Farish
4 Mar 2014, 12:42 AM
One possibility is to use a card layout for your center region. In the items you can have both your forms and then use setActiveItem method to display either one of the two forms as you wish.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Card

p.szuttenbach
4 Mar 2014, 12:33 PM
Give panel a name or itemId, then onclick of registration button you can remove the panel with login and replace it with registration,



Ext.define('App.panel.PanelLogin', {
extend: 'Ext.panel.Panel',
name: 'login-panel'
});


Ext.define('App.panel.PanelSubmit', {
extend: 'Ext.panel.Panel',
name: 'registration-panel'
});


Ext.define('App.Viewport', {
extend: 'Ext.viewport.Viewport',
items: [
Ext.create('App.panel.PanelLogin')
],
dockedItems: [
Ext.create('Ext.button.Button', {
listeners: {
click: function(btn) {
this.up('viewport').down('[name=login-panel]').remove();
this.up('viewport').add(Ext.create('App.panel.PanelSubmit'));
},
scope: this
}
})
]
});