PDA

View Full Version : Card layout not giving setCard function



blessan
27 Jul 2010, 12:44 AM
I tried creating a card layout. But for some reason When I use Ext.getCmp on it, there is no setCard function. Can someone please tell me where im missing somthing.



demos.phonePanel= new Ext.Panel({
id:'innerContainer',
layout:'card',
style:'background-color:black;',
items:[
{
xtype: 'panel',
id:'homePanel',
scroll:'vertical',
html:'<div class="homePanelIcons">teset</div>'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
id:'main_top_toolbar',
title:'UBook24-7.com',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'normal',
text:' ',
baseCls:'ubHomeButton',
maxWidth:40,
maxHeight:40,
minWidth:40,
minHeight:40,
handler: function() {
var appContainer = Ext.getCmp('innerContainer');
var third=Ext.getCmp('homePanel');
appContainer.setCard(third, {type:'slide',direction:'right'});
}
},
{xtype: 'component', flex: 1}
]
}
]
});

evant
27 Jul 2010, 1:10 AM
Works fine for me. No errors.

Though I did have trouble finding the button. Text is ' '??!?!

blessan
27 Jul 2010, 1:43 AM
I used an image for that button. It started working for me too but I have problems when I use 2 files. 1 for the iphone and ipad and other for the computer.

I think the files are getting clashed. How can this be properly done.

This is my main js file


Ext.ns('demos');
Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

if (Ext.platform.isPhone||Ext.platform.isTablet) {
mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'none',
layout:'card',
activeItem:0,
items:demos.phonePanel
});
} else {
mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'none',
layout:'card',
activeItem:0,
items:demos.tabletPanel
//items:demos.phonePanel
});
}

/*++ Appointment Icon - Action Handler ++*/
Ext.select('.appointmentsIcon').on("click",function() {
if(Ext.platform.isPhone) {
var appContainer = Ext.getCmp('innerContainer');
var calPanel=Ext.getCmp('calendarPanel');
appContainer.setCard(calPanel, 'slide');
} else {
var appContainer = Ext.getCmp('innerContainer');
var calPanel=Ext.getCmp('calendarPanel');
appContainer.setCard(calPanel, 'slide');
}
});

/*++ Checkout Icon - Action Handler ++*/
Ext.select('.checkoutIcon').on("click",function() {console.info('demos.Picker');
var appContainer = Ext.getCmp('innerContainer');
var chkPanel=demos.checkout;
appContainer.setCard(chkPanel, 'slide');
});

/*++ Customer Icon - Action Handler ++*/
Ext.select('.customerIcon').on("click",function() {
alert('Customer');
});

/*++ Management Icon - Action Handler ++*/
Ext.select('.managementIcon').on("click",function() {
alert('Management');
});

/*++ Adminstration Icon - Action Handler ++*/
Ext.select('.administrationIcon').on("click",function() {
alert('Adminstration');
});

/*++ Community Icon - Action Handler ++*/
Ext.select('.communityIcon').on("click",function() {
alert('Community');
});
}

}
);


Now I have 2 files
phonePanel.js



demos.phonePanel= new Ext.Panel({
id:'innerContainer',
layout:'card',
style:'background-color:black;',
items:[
{
xtype: 'panel',
id:'homePanel',
scroll:'vertical',
html:'<div class="homePanelIcons">'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon appointmentsIcon"></div><p>Appointments</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon checkoutIcon"></div><p>Checkout</p></div>'+
'</div>'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon customerIcon"></div><p>Customer</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon managementIcon"></div><p>Management</p></div>'+
'</div>'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon administrationIcon"></div><p>Administration</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon communityIcon"></div><p>Community</p></div>'+
'</div>'+
'</div>'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
id:'main_top_toolbar',
title:'UBook24-7.com',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'normal',
text: '',
baseCls:'ubHomeButton',
maxWidth:40,
maxHeight:40,
minWidth:40,
minHeight:40,
handler: function() {
var appContainer = Ext.getCmp('innerContainer');
var third=Ext.getCmp('homePanel');
appContainer.setCard(third, {type:'slide',direction:'right'});
}
},
{xtype: 'component', flex: 1}
]
}
]
});


and tabletPanel.js


demos.tabletPanel= new Ext.Panel({
xtype:'panel',
layout:'hbox',
style:'background-color:black;',
items:[
{
xtype: 'panel',
id:'homePanel',
width:320,
height:'100%',
scroll:'vertical',
html:'<div class="homePanelIcons">'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon appointmentsIcon"></div><p>Appointments</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon checkoutIcon"></div><p>Checkout</p></div>'+
'</div>'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon customerIcon"></div><p>Customer</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon managementIcon"></div><p>Management</p></div>'+
'</div>'+
'<div class="homeIconRow">'+
'<div class="homeIconContainer"><div class="homeIcon administrationIcon"></div><p>Administration</p></div>'+
'<div class="homeIconContainer"><div class="homeIcon communityIcon"></div><p>Community</p></div>'+
'</div>'+
'</div>'
},
{
xtype: 'panel',
scroll:'vertical',
//style:'border:1px solid white',
id:'innerContainer',
width: screen.width-322,
layout:'card',
height:'100%',
items:[
{
xtype:'panel',
id:'splashScreen',
style:'background-color:black;',
html:'<div class="mainPanelTitle">'+
'<h1>'+
'UBook 24-7 Demo'+
'</h1>'+
'</div>'
},
demos.calendar,
demos.checkout
]

}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
id:'main_top_toolbar',
title:'UBook24-7.com',
layout: {
pack: 'justify',
align: 'center' // align center is the default
},
items: [
{
xtype: 'button',
ui: 'normal',
text: '',
baseCls:'ubHomeButton',
maxWidth:40,
maxHeight:40,
minWidth:40,
minHeight:40,
handler: function() {
var appContainer = Ext.getCmp('innerContainer');
var splashScreen=Ext.getCmp('splashScreen');
appContainer.setCard(splashScreen, {type:'slide',direction:'right'});
}
},
{xtype: 'component', flex: 1}
]
}
]
});



Can u please help me. If i include both the files. it wont work. If I exclude either of the 2 files it works fine. What am doing wrong here??

blessan
27 Jul 2010, 1:54 AM
When I removed one of my files it worked for me too.
Can u please help me. I am trying to create an app like the kitchen sink which will have only 1 panel in the iphone and 2 panels in the chrome browser.
I tried to separate the layout by using 2 different files.
But I think thats causing the problem.
Here is my main js file.


Ext.ns('demos');
Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

if (Ext.platform.isPhone||Ext.platform.isTablet) {
mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'none',
layout:'card',
activeItem:0,
items:demos.phonePanel
});
} else {
mainPanel=new Ext.Panel({
fullscreen:true,
scroll: 'none',
layout:'card',
activeItem:0,
//items:demos.tabletPanel
items:demos.phonePanel
});
}

/*++ Appointment Icon - Action Handler ++*/
Ext.select('.appointmentsIcon').on("click",function() {
if(Ext.platform.isPhone) {
var appContainer = Ext.getCmp('innerContainer');
var calPanel=Ext.getCmp('calendarPanel');
appContainer.setCard(calPanel, 'slide');
} else {
var appContainer = Ext.getCmp('innerContainer');
var calPanel=Ext.getCmp('calendarPanel');
appContainer.setCard(calPanel, 'slide');
}
});

/*++ Checkout Icon - Action Handler ++*/
Ext.select('.checkoutIcon').on("click",function() {console.info('demos.Picker');
var appContainer = Ext.getCmp('innerContainer');
var chkPanel=demos.checkout;
appContainer.setCard(chkPanel, 'slide');
});

/*++ Customer Icon - Action Handler ++*/
Ext.select('.customerIcon').on("click",function() {
alert('Customer');
});

/*++ Management Icon - Action Handler ++*/
Ext.select('.managementIcon').on("click",function() {
alert('Management');
});

/*++ Adminstration Icon - Action Handler ++*/
Ext.select('.administrationIcon').on("click",function() {
alert('Adminstration');
});

/*++ Community Icon - Action Handler ++*/
Ext.select('.communityIcon').on("click",function() {
alert('Community');
});
}

}
);