PDA

View Full Version : Switching between views in ExtJS



noiks
8 Oct 2012, 11:04 AM
How do we switch between two views in ExtJS?

Say my application has a welcome screen, a login screen and a register screen. The welcome screen has two buttons which navigate user to corresponding screens. Now for this I have created Welcome.js, Login.js and Register.js, these are views which contain the display logic of three screens. How do I switch/navigate between these views?

It would be great if you can point me to some documentaion/exapmle/post explaining the same.

scottmartin
8 Oct 2012, 11:35 AM
Are there any of the examples that display the behavior you are looking for:
http://www.sencha.com/products/extjs/examples/

Take for instance these examples:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-grid
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/feed-viewer/feed-viewer.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout-browser/layout-browser.html

Or there are tab options as well, new tab each time

Scott.

noiks
8 Oct 2012, 9:36 PM
No, I did not find any example which depict the behavior I am looking for. I have searched extensively. All examples show same page navigation. What I am looking for is an alternative to ViewStack in flex. Basically it replaces the entire view in the screen with another view.

evant
8 Oct 2012, 10:14 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Card

noiks
9 Oct 2012, 3:13 AM
@evant, thanks for the reply. I had seen this example, but was not sure as if this is the right approach. I was getting the below error,

Uncaught TypeError: Object has no method 'fireEvent' at :8080/MyApp/extjs/src/layout/container/Card.js:320

Below is my code,

app.js

Ext.application({
name: 'MyApp',
controllers: ['Users'],
floating:true,
launch: function() {
Ext.create('Ext.panel.Panel', {
layout: 'card',
id:'mainContainer',
items: [
{
xtype: 'login'
},
{
xtype:'register'
}
],
renderTo: Ext.getBody()
});
Ext.getCmp('mainContainer').getLayout().setActiveItem(0);
}
})


Login.js

Ext.define('MyApp.view.user.Login' ,{
extend: 'Ext.form.Panel',
alias : 'widget.login',
title: 'Login',
bodyPadding: 5,
width: 350,
floating: true,
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
initComponent:function(){
this.items = [{
fieldLabel: 'Username',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'last',
allowBlank: false,
inputType: 'password'
}];


// Reset and Submit buttons
this.buttons = [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// I will be writing some other logic here. For now, suppose this is register button click
Ext.getCmp('mainContainer').getLayout().setActiveItem(1);
}
}
}];
this.callParent(arguments);
}
});


Users.js

Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.Login', 'user.Register'],
init: function() {
this.control({
'panel': {
render: this.onPanelRendered
}
});
},


onPanelRendered: function() {
console.log('The panel was rendered');
}
});


I also have Register.js in my code. Now what am I doing wrong here? Along with the above error, it does not display anything on screen.
Also, is this the right way to do this or is there any better way to achieve this?

kivras
11 Nov 2012, 2:55 PM
I get the same error (Object has no method 'fireEvent') when trying to switch card's if i define a constructor on that card.
Also when i replace the constructor of that card with an initComponent function i get the error "
Cannot read property 'length' of undefined "

If i don't define anything on the card and just enter configurations it works fine......
Help please this is driving me nuts.

noiks
12 Nov 2012, 3:03 AM
Can you put your code here?

kivras
12 Nov 2012, 4:01 AM
Important code is on Bold

The controller


Ext.define('chronobiller.controller.ClientTab',{
extend:'Ext.app.Controller',
init:function(){
this.control({
'#overviewBtn,#billingInfoBtn':{
click:this.onNavBtnClick,
scope:this
}
});
},

onNavBtnClick:function(btn){
var itemId=btn.getItemId();
btn.findParentByType('clienttab').getLayout().setActiveItem(itemId.substring(0,itemId.length-3)+'Card');

}

});


Ext.define('chronobiller.view.MainContentTabs.ClientTabPanel', {
extend:'Ext.panel.Panel',
closable:true,
alias:'widget.clienttab',
layout:'card',
activeItem:0,
requires:[
'chronobiller.view.MainContentTabs.EditClientForm'
],

constructor:function(cfg){

this.title=cfg.companyName;
this.clientId = cfg.clientId;
this.tbar =
{
xtype:'toolbar',
height:100,
items:[
{
xtype:'button',
iconCls:'btnIcon80',
icon:'resources/images/calendar80.png',
iconAlign:'top',
width:120,
height:100,
itemId:'overviewBtn',
html:'<span class="btnText120">Overview</span>'
},{
xtype:'tbseparator',
height:90

},
{
xtype:'button',
itemId:'billingInfoBtn',
iconCls:'btnIcon80',
icon:'resources/images/calendar80.png',
iconAlign:'top',
width:120,
height:100,
html:'<span class="btnText120">Billing info</span>'
},'->',
{
xtype:'container',
html: this.formatHeader(cfg.companyName,cfg.clientId),
height:100,
width:600

}
]
};

this.items = [
{
itemId:'overviewCard',
html:'card1'

},
{

itemId:'billingInfoCard',
xtype:'editclientform'

}


]


this.callParent();
},

formatHeader:function(title,id){
return '<span class="clientTabHeader">'+title+
'</br>Client id:'+id+
'</span>'
}



});

The card


Ext.define('chronobiller.view.MainContentTabs.EditClientForm', {
extend:'Ext.panel.Panel',
alias:'widget.editclientform',
constructor:function(){
this.callParent();
}


});

kivras
12 Nov 2012, 4:21 AM
Ok issue solved.

I had to place my custom panel inside an items attribute.


{

itemId:'billingInfoCard',
items:[
{xtype:'editclientform'}
]
}

Although i did this when trying to solve the issue, again i had errors.
Seems i was so unlucky that when i found the solution , i changed something else and got an error again.