PDA

View Full Version : How displaying a text when tab is clicked ?



lpastor
15 Aug 2009, 1:03 AM
Hello,

How can I display different html text in my west panel, as the tab is clicked ?


Ext.onReady(function() {
Ext.QuickTips.init();

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[new GridLP('Utilisateurs',400,300),
{
title: 'Another Tab',
html: Ext.example.bogusMarkup
}]
});

// Panel for the west
var nav = new Ext.Panel({
id: 'westpanel',
title: 'Information',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
collapsible:true,
closable:true,
width:600,
height:350,
plain:true,
layout: 'border',
items: [nav, tabs]
});

win.show(this);

});
});

Copernicus
15 Aug 2009, 1:31 AM
Check out the Ext tabs example with dynamic loading:

http://extjs.com/deploy/ext-3.0-rc3/examples/tabs/tabs.html

benja
15 Aug 2009, 2:06 AM
Ext.onReady(function() {
Ext.QuickTips.init();

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[{
title: 'One tab',
html: '<h1>tab1</h1>'
},
{
title: 'Another Tab',
html: '<h1>tab2</h1>'
}]

});

// Panel for the west
var nav = new Ext.Panel({
id: 'westpanel',
title: 'Information',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
collapsible:true,
closable:true,
width:600,
height:350,
plain:true,
layout: 'border',
items: [nav, tabs]
});

function tabhandler(tabpanel,tab){

//Ext.MessageBox.alert('Tab change', 'Tab changed to '+ tab.title);
tab.body.update('<h3> New HTML </h3>');

}

win.show(this);
tabs.on('tabchange',tabhandler);

});

lpastor
15 Aug 2009, 2:08 AM
Thank you very much, but my problem is to modify the content of another panel (the west panel).

How do I refer it, and how can I change it ?

Laurent

Copernicus
15 Aug 2009, 2:23 AM
Hi again,

How to get a component that exists in the DOM (has to have a id):



var panel = Ext.getCmp("westpanel");
How to add something to its item array:



panel.add(new Ext.form.HtmlEditor());
Should work for you. The HtmlEditor is just an example, I like using it. You can add any Ext component. :)

Animal
15 Aug 2009, 4:31 AM
Does this help?

http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=tabchange

http://extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=beforetabchange

benja
15 Aug 2009, 4:35 AM
function tabhandler(tabpanel,tab){

//Ext.MessageBox.alert('Tab change', 'Tab changed to '+ tab.title);
tab.body.update('<h3> New HTML </h3>');
var panel = Ext.getCmp("westpanel");
panel.add(new Ext.form.HtmlEditor());
panel.doLayout();//refresh the panel

}

lpastor
15 Aug 2009, 4:35 AM
Oui Benja I am French, j'écris si mal l'Anglais que tu m'a reconnu ?

Je débute en langage objet et je galère grave...

Tu es de quel coin en France ? - Tu peux me répondre sur [email protected]

Merci encore pour le coup de main.

Laurent

benja
15 Aug 2009, 4:40 AM
Lol j'en étai sur Laurent nom typiquement french sinon pour ton écriture ca va c'est une adresse msn ?

lpastor
15 Aug 2009, 5:05 AM
Non, c'est une boite mail jetable et pratique pour pas se faire spamer : www.yopmail.com

Les fonctionnalités d'Extjs me plaisent bien et Je te demandais de quel coin tu est, car je risque d'embaucher un développeur Extjs dans quelques mois - si ca t'intéresse...

Laurent

lpastor
15 Aug 2009, 5:21 AM
Thank's a lot everybody, here is exactly what I am looking for :

I will use westpanel to give contextual information when a tab is changed.

I don't know if it is optimised, but I make a big step to undestand Extjs.


Ext.onReady(function() {
Ext.QuickTips.init();

// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[{
title: 'One tab',
html: '<h1>tab1</h1>'
},
{
title: 'Another Tab',
html: '<h1>tab2</h1>'
}]

});

// Panel for the west
var nav = new Ext.Panel({
id: 'westpanel',
title: 'Information',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
collapsible:true,
closable:true,
width:600,
height:350,
plain:true,
layout: 'border',
items: [nav, tabs]
});

function tabhandler(tabpanel,tab){

if (tab.title=="One tab"){
var message='<h3> New - A - HTML </h3>';
}else{
var message='<h3> New - B - HTML </h3>';
}

var panel = Ext.getCmp("westpanel");
panel.body.update(message);
panel.doLayout();//refresh the panel

}

win.show(this);

var panel = Ext.getCmp("westpanel");
panel.body.update('<h3> First HTML Page </h3>');
panel.doLayout();//refresh the panel

tabs.on('tabchange',tabhandler);

});

benja
15 Aug 2009, 5:28 AM
Je suis de paris sinon pour l'offre je ne pense pas être a la hauteur ce serait pour développé quel genre ?

lpastor
15 Aug 2009, 5:38 AM
Pour développer des petites applis de gestion pour nos services internes et rattaché via php à des bases Mysql ou Oracle.

Ça sera un poste basé du coté de Versailles.

Laurent

benja
15 Aug 2009, 5:42 AM
En ce moment c'est justement ce que je développe a des fin personnel une appli de gestion de budget personnel coupler avec php via le zend framework j'utilise la nouvelle grille restful de extjs pour le CRUD c'est impressionnant sinon la doc extjs est vraiment pauvre j'avoue que c'est dur pour comprendre le mécanisme n'hesitez pas a me contacter si vous avez des soucis avec EXTJS