PDA

View Full Version : Access (read/change) parent element parameters



ImShogun
7 Aug 2009, 6:16 AM
Hello,

I did spend time on google, forums, API reference and Begginers guide, but still, I can't find the exact syntax to:

1) read/change parent parameters from child element
2) read/change parameters using element ID

The code below will illustrate the two approachs I'm trying: I have a Form, containing Tabs, containing Fields. Id' like to add a "*" prefix to both Tab Title and Form Title when something changed.I know the Green and red lines from the code below are not correct but they should illustrate what I'm trying to accomplish.

I believe if somebody explain that to me, It will be a giant step for me in my understanding of Extjs world.

This is my code:



//FORM
var EditTabsForm = new Ext.FormPanel({
id:'EDIT_1_1',
layout:'fit',
labelWidth: 150, // label settings here cascade unless overridden
url:'edit_save.cfm?table=6&id=1',
frame:false,
bodyStyle:'padding:5 5 5 5',
//width: 350,
border:false,
bodyBorder:false,
//defaults: {width: 230},
defaultType: 'textfield',
//title: 'Edition',
closable:true,
items: [{
//EDIT SUB TABS (previously at BOTTOM)
xtype:'tabpanel',

id:'EDIT_1_1_TP',
margins:{top:0, right:0, bottom:0, left:0},
deferredRender:true,
enableTabScroll:true,
hideBorders:true,
iconCls:'config',
activeTab: 0,
border: false,
//tabPosition:'bottom',
//tabTip:'ceci',
items: [

{
layout:'form',
id:'EDIT_1_1_TP_T_1',
labelWidth: 150, // label settings here cascade unless overridden
//url:'save-form.php',
frame:false,
title: '1. Généralités',
bodyStyle:'padding:20 20 20 20',
//width: 350,
border:false,
bodyBorder:false,
borders:'{top:0px;}',
autoScroll:true,
//defaults: {width: 230},
defaultType: 'textfield',
iconCls:'info',
items: [

{
width:300,
fieldLabel: 'test',
value: "Accueil",
name: 'Nom_PageFR',
qtip:"Titre francophone de la page.",
allowBlank:true
,listeners:{
change:function(){





Ext.select('EDIT_1_1').title='*'+Ext.select('EDIT_1_1').title;
parent.title='*'+parent.title;
}
}
},
{
xtype : 'hidden',
name: 'ToSave',
value: "Nom_PageFR"
}
Thank you so much for your time.

Condor
7 Aug 2009, 6:26 AM
You could use:

var panel = Ext.getCmp('EDIT_1_1_TP_T_1');
panel.setTitle('*' + title);

ImShogun
7 Aug 2009, 7:01 AM
You could use:

var panel = Ext.getCmp('EDIT_1_1_TP_T_1');
panel.setTitle('*' + title);

Thank you! This worked: (some coldfusion dynamic code beetween ##):



//Add * to form inside tab
var panel = Ext.getCmp('#FormTabpanelTabID#')
panel.setTitle('*'+panel.title);
//Add * to form tab title
var panel = Ext.getCmp('#TabID#');
panel.setTitle('*'+panel.title);
Now I know I should have tryed getCmp() and not select()!

Is there any way to just say something like this:



//Add * to form inside tab
var panel = Ext.getParentCmp();
panel.setTitle('*'+panel.title);
//Add * to form tab title
var panel = Ext.getParentCmp().getParentCmp();
panel.setTitle('*'+panel.title);
...?

This thread seems to say it can't:

http://extjs.com/forum/showthread.php?t=26484 (http://extjs.com/forum/showthread.php?t=26484)

Condor
7 Aug 2009, 7:17 AM
A tabpanel doesn't have a title, so you only need to change the title of the tabpanel item (your form).

You could use the ownerCt property, e.g.

listeners:{
change:function(){
this.ownerCt.setTitle('*' + this.ownerCt.title);
}
}

ImShogun
7 Aug 2009, 7:25 AM
Also, What if I want to know about the form IsDirty status (for example to add "*" only once) ?

This is "undefined":

alert(Ext.getCmp('#FormID#').isDirty);

And that show nothing:

alert(Ext.getCmp('#FormID#').isDirty());

ImShogun
7 Aug 2009, 7:42 AM
A tabpanel doesn't have a title, so you only need to change the title of the tabpanel item (your form).

You could use the ownerCt property, e.g.

listeners:{
change:function(){
this.ownerCt.setTitle('*' + this.ownerCt.title);
}
}

Great!

I then succesfully did:



this.ownerCt.setTitle('*'+this.ownerCt.title);



EDIT: Which is exactly the same, by the way :-)

But then I wondered: what if I need to change any other value, like the url, for which there is no "setUrl()"?

This ain't working:

this.ownerCt.url='my_new_path';

Condor, you don't even know how much you're helping me, and I'm not talking only about this post :-)

PS: What about recursivity? Would " this.ownerCt.ownerCt... " work?

ImShogun
7 Aug 2009, 7:58 AM
And last (I hope), I'm now trying to set some custom parameter to the form element, something like "IsMarked:false" so then I can switch to true when I add the "*" sign, avoiding adding multiple times... But I can't find a way to add custom parameters?

Condor
7 Aug 2009, 10:33 PM
It's just a javascript object, so you can add any property you want (as long as you don't use one that is already used by the component).


var p = this.ownerCt;
if(!p.isMarked){
p.isMarked = true;
p.setTitle('*' + p.title);
}

ImShogun
8 Aug 2009, 12:16 PM
It's just a javascript object, so you can add any property you want (as long as you don't use one that is already used by the component).


var p = this.ownerCt;
if(!p.isMarked){
p.isMarked = true;
p.setTitle('*' + p.title);
}

Obvious... I was too close to see the whole picture :-) Thanks!