PDA

View Full Version : outlook bar in extjs



byannick
14 Aug 2010, 12:52 AM
Hello

I wish to make a navigation similar to Outlook 2003 in ExtJS.

Currently, this is the code that corresponds to:


var viewport = new Ext.Viewport({
layout: 'border',
items: [
tabNavigation = new Ext.TabPanel({
region: 'north',
defaults:{autoHeight: true},
items:[
{
contentEl:'mySessionEl',
title: 'Ma session',
tbar: [{
xtype: 'buttongroup',
defaults: {
scale: 'small'
},
items: [{
xtype:'splitbutton',
text: 'Menu Button',
iconCls: 'add16',
menu: [{text: 'Menu Item 1'}]
}]
}]
},
{contentEl:'clientsEl', title: 'Clients'},
{contentEl:'projectsEl', title: 'Projets'},
{contentEl:'configEl', title:'Configuration'},
{contentEl:'statistiqueEl', title:'Statistique'}
]
}),
....


the problem is that my tabs appear good, but not its items.

ashaihullin
14 Aug 2010, 1:12 AM
why are you not puting components in TapPanel items instead contentEl?

byannick
14 Aug 2010, 2:04 AM
how ?

ashaihullin
14 Aug 2010, 2:27 AM
hm... i guess you have panels or smth else (clients, projects etc...) ?

if so why not to put them in tabPanel:




Ext.onReady(function(){

var clients = new Ext.Panel({
title: 'Clients'
});

var projects = new Ext.Panel({
title: 'Projets'
});

var config = new Ext.Panel({
title: 'Configuration'
});

var tabNavigation = new Ext.TabPanel({
scope: this,
activeTab: 0,
items:[

this.clients, this.projects, this.config
]
});

tabNavigation.render( document.body );
});


like this...

byannick
15 Aug 2010, 8:41 AM
Okay, i see how you think :). but i have an error:

"
c is undefined
chrome://firebug/content/blank.gif }else if(!c.events){"
ext-all-debug.js (ligne 11830


my complet code's:


Ext.onReady(function(){
Ext.QuickTips.init();
var tabNavigation;
var grid;
var accordeon;
var clients = new Ext.Panel({
title: 'Clients'
});
var projects = new Ext.Panel({
title: 'Projets'
});
var config = new Ext.Panel({
title: 'Configuration'
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
tabNavigation = new Ext.TabPanel({
region: 'north',
defaults: 64,
renderTo: 'tabPanel',
scope: this,
activeTab: 0,
items:[
this.clients, this.projects, this.config
]
}),
grid = new Ext.grid.GridPanel({
region: 'center',
title: 'Centre d\'informations',
tbar: [{
text: 'Ajouter'
}, '-',
{
text: 'Editer'
}, '-',
{
text: 'Imprimer la liste'
}, '-',
{
text: 'Imprimer le détail'
}, '-',
{
text: 'supprimer'
}, '->',
{
xtype: 'textfield',
helpfile: 'Recherche',
vtype: 'alpha'
}],
store: [
[1, 'One'],
[2, 'Two'],
[3, 'Three']
],
columns: [{
header: 'Number',
dataIndex: 'field1'
},
{
header: 'Name',
dataIndex: 'field2'
}]
}),
grid = new Ext.grid.GridPanel({
tbar: [{
text: 'Ajouter'
}, '-',
{
text: 'Editer'
}, '-',
{
text: 'supprimer'
}, '-',
{
text: 'Imprimer la liste'
}, '-',
{
text: 'Imprimer le détail'
}, '-',
{
text: 'Marquer comme terminé'
}, '->',
{
xtype: 'textfield',
fieldLabel: 'Recherche',
vtype: 'alpha'
}],
collapsible: true,
title: 'Projets et détails',
collapseMode: 'mini',
height: 200,
split: true,
region: 'south',
store: [
[1, 'One'],
[2, 'Two'],
[3, 'Three']
],
columns: [{
header: 'Number',
dataIndex: 'field1'
},
{
header: 'Name',
dataIndex: 'field2'
}]
})]
});
});


The result is just a white page with this write: " '; " \o/

See you later!

ashaihullin
15 Aug 2010, 10:45 AM
You should see docs and play with samples. Too much of wrong coding. Wrong declarations in properties.