PDA

View Full Version : Creating a Layout for my new project



danvega
30 Jun 2010, 6:40 PM
I am starting a new project and just a little confused on how to lay this out. Based on one of the tab bar layout examples I started with that. I have these different screens, for this example we will say 5. Using the card layout I have this so far.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>

<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="../ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>
<body>

<div id="card1">
<h1>Card 1</h1>

</div>

<div id="card2">
<h1>Card 2</h1>

</div>

<div id="card3">
<h1>Card 3</h1>

</div>

<div id="card4">
<h1>Card 4</h1>

</div>

<div id="card5">
<h1>Card 5</h1>

</div>

</body>
</html>

And here is the js...

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Card 1 Title',
iconCls: 'time',
cls: 'card1',
contentEl: 'card1'
}, {
title: 'Card 2 Title',
iconCls: 'team',
cls: 'card2',
contentEl: 'card2'
}, {
title: 'Card 3 title',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
}, {
title: 'Card 4 Title',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
}, {
title: 'Card 5 Title',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'
}
]
});
}
});


So far so good. My question is how can I add a nice bar to the top that will have the title of each "card". The other question is how can I load these "cards" via ajax. Right now all of this content is pretty static but if each of these card divs had the actual content this thing would take forever to load.

TommyMaintz
30 Jun 2010, 7:25 PM
In order to get the title from the active card you can do the following.



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
var titleBar = new Ext.Toolbar({
dock: 'top'
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
dockedItems: [titleBar],
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
listeners: {
afterlayout : function() {
titleBar.setTitle(this.layout.getActiveItem().title);
},
cardswitch: function(card) {
titleBar.setTitle(card.title);
}
},
items: [{
title: 'Card 1 Title',
iconCls: 'time',
cls: 'card1',
contentEl: 'card1'
},
{
title: 'Card 2 Title',
iconCls: 'team',
cls: 'card2',
contentEl: 'card2'
},
{
title: 'Card 3 title',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
},
{
title: 'Card 4 Title',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
},
{
title: 'Card 5 Title',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'
}
]
});
}
});


To load content into a component you can do the following.


Ext.Ajax.request({
url: 'card1.html',
success: function(response) {
card1.update(response.responseText);
}
});


You could do this in the afterrender event of each card for example to only load the data as soon as the card is shown for the first time.

raven77m
1 Jul 2010, 5:28 PM
In order to get the title from the active card you can do the following.
To load content into a component you can do the following.


Ext.Ajax.request({
url: 'card1.html',
success: function(response) {
card1.update(response.responseText);
}
});
You could do this in the afterrender event of each card for example to only load the data as soon as the card is shown for the first time.
Sorry for the dumb question, I cant figure out exactly where to put this. I searched but I can't figure it out. Anyone have a full example of its use?
Thanks for any input...

danvega
6 Jul 2010, 7:37 AM
OK I am almost there.. thanks for the help guys.. I just don't understand how you set the inner html of a <div>. If the item that made that call had an id of card1 the code below might work but it doesn't. I tried giving the first item an id:'card1' but that didn't work either.

Sorry for the easy questions here but its been awhile since I have used Ext


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {

var titleBar = new Ext.Toolbar({
dock:'top'
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
dockedItems: [titleBar],
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
listeners: {
afterlayout : function() {
titleBar.setTitle(this.layout.activeItem.title);
},
cardswitch: function(card) {
titleBar.setTitle(card.title);
}
},
items: [{
id:'card1',
title: 'Card 1',
iconCls: 'time',
cls: 'card1',
listeners: {
afterrender : function(){
Ext.Ajax.request({
url: 'card1.cfm',
method: 'GET',
success: function(response){

/**
* How do you update the body of a <div> with the id of card1
* this will obviously give you a card1 is not defined.
*
*/
card1.update(response);

},
failure: function(){
handleError("There was an issue getting the card 1 data");
}
});
}
}
}, {
title: 'Card 2',
iconCls: 'team',
cls: 'card2',
contentEl: 'card2'
}, {
title: 'Card 3',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
}, {
title: 'Card 4',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
}, {
title: 'Card 5',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'
}
]
});

}
});

function handleError(e){
console.log(e);
}

danvega
6 Jul 2010, 12:42 PM
Figured it out, this should work the only difference is if you don't use ColdFusion you won't need that param.


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {

var titleBar = new Ext.Toolbar({
dock:'top'
});

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
dockedItems: [titleBar],
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
listeners: {
afterlayout : function() {
titleBar.setTitle(this.layout.activeItem.title);
},
cardswitch: function(card) {
titleBar.setTitle(card.title);
}
},
items: [{
id:'card1',
title: 'Card 1',
iconCls: 'time',
cls: 'card1',
listeners: {
afterrender : function(){
Ext.Ajax.request({
url: 'card1.cfm',
method: 'GET',
params: {
"_cf_nodebug":true
},
success: function(response){
Ext.getCmp("card1").update(response.responseText);
},
failure: function(){
handleError("There was an issue getting the card 1 data");
}
});
}
}
}, {
title: 'Card 2',
iconCls: 'team',
cls: 'card2',
contentEl: 'card2'
}, {
title: 'Card 3',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
}, {
title: 'Card 4',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
}, {
title: 'Card 5',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'
}
]
});

}
});

function handleError(e){
console.log(e);
}