PDA

View Full Version : How to navigate to a new panel on a button click?



bacha
25 Feb 2014, 7:52 PM
I am a newbie to extjs and I am writing a sample login web application. I am clueless on how to navigate to a landing page once the login button is clicked. I played around with setActiveItem method inside my conroller but failed. Please point me to the right direction to get this working. Any help will be appreciated.:((

I would like to redirect to a landing page (LandingPanel.js) once the login button is clicked.

Listing my components below

Viewport.js


Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires:['App.view.LoginPanel','App.view.CommentsPanel'],

items: [{
region: 'north',
html: '<h1 class="x-panel-header">Sample App</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region: 'east',
title: 'User Comments',
xtype: 'commentspanel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'loginpanel',
}]
});


LoginPanel.js


Ext.define('App.view.LoginPanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.loginpanel',
items : [ {
xtype : 'textfield',
name : 'name',
fieldLabel : 'Name'
}, {
xtype : 'textfield',
inputType: 'password' ,
name : 'password',
fieldLabel : 'Password'
}, {
xtype : 'button',
text : 'Login',
action : 'login'
} ]
});


CommentsPanel.js


Ext.define('App.view.CommentsPanel', {
extend:'Ext.panel.Panel',
alias: 'widget.commentspanel',
html:'Ray: Very good app'

});


AppController.js


Ext.define('App.controller.AppController', {
extend:'Ext.app.Controller',
init:function(){
this.control({
//Component listeners
'button[action=login]': {
click:this.onButtonClick
}
});
this.application.on({
//Event handlers
});
},

onButtonClick:function(){
alert("Login Success");
//How to redirect to LandingPanel.js?
}
});

Zinnia
25 Feb 2014, 11:56 PM
Check the below url, hope this may help you

http://stackoverflow.com/questions/11327221/button-click-navigate-to-another-view

bacha
26 Feb 2014, 7:19 AM
Card Layout was the missing piece in my puzzle.

I did the following things and got it working
I created a MainPanel and replaced it in place of the LoginPanel in my Viewport
I made the layout of the MainPanel as card
I added the LoginPanel and LandingPanel into the MainPanel like this
items : [ { xtype : 'loginpanel',
id : 'loginpanel'
}, {
xtype : 'landingpanel',
id : 'landingpanel'
} ]
I made the LoginPanel as the activeitem in the MainPanel by setting activeItem : 0
Finally in the controller, on the login button click. I did the following
Ext.getCmp('main_panel').getLayout().setActiveItem(1);
Thank you!! :)