PDA

View Full Version : Dynamic fieldLabel



floraoma2000-extjs
14 Jun 2012, 2:44 AM
Hi all,
this is my first question to this forum.
I am new to ExtJS and I think my question is a very easy one for you.
First of all I have only one combobox in my FormPanel. If I have selected an item of this combobox,
the value of the selected item should be displayed in the fieldLabel of other comboboxes, which are shown after selecting.
Please can you help me here is my code

Ext.onReady(function(){


// Define the model for a System
Ext.define('System', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'kurzbezeichnung'},
{type: 'string', name: 'org_id'}
]
});
// The data
var system = Ext.create('Ext.data.Store', {
fields: ['kurzbezeichnung', 'org_id'],
data : [
{ kurzbezeichnung: 'One', org_id: "1" },
{ kurzbezeichnung: 'Two', org_id: "2" },
{ kurzbezeichnung: 'Three', org_id: "3" },
{ kurzbezeichnung: 'Four', org_id: "4" },
]
});


// Define the model
Ext.define('Nutzungsgrad', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'nutzung'},
{type: 'string', name: 'nutz_id'}
]
});
// The data for all anlagen
var nutzungsgrad = Ext.create('Ext.data.Store', {
fields: ['nutzung', 'nutz_id'],
data : [
{ nutzung: 'full', nutz_id: "1" },
{ nutzung: 'empty', nutz_id: "2" },
]
});

var problem = Ext.create('Ext.form.Panel', {
title: 'Title',
items: [{
xtype: 'displayfield',
hideLabel: true,
padding: '10 0 20 0',
value: '<span style="color:blue;font-size:20px;align:center">Report</span>',
},{
xtype: 'combobox',
fieldLabel: 'System',
mode: 'local',
queryMode: 'local',
valueField: 'kurzbezeichnung',
displayField: 'kurzbezeichnung',
name: 'kurzbez',
id: 'kurzbez',
store: system,
listeners: {
select: function (combobox, kurzbezeichnung) {
var systemname = Ext.getCmp('kurzbez').getValue();
console.info(systemname);
if (systemname != '') {
Ext.getCmp('nutzung').show();
}
}

}
},{
xtype: 'combobox',
fieldLabel: 'The system<b> ' + this.systemname + '</b> is used',
defaultType: 'container',
id: 'nutzung',
hidden: 'true',
displayField: 'nutzung',
name: 'nutzung',
store: nutzungsgrad,
}
],
buttons: [{

},{

}]
});
problem.render(document.body);
});

redraid
14 Jun 2012, 2:59 AM
var problem = Ext.create('Ext.form.Panel', {
title: 'Title',
items: [{
xtype: 'displayfield',
hideLabel: true,
padding: '10 0 20 0',
value: '<span style="color:blue;font-size:20px;align:center">Report</span>',
},{
xtype: 'combobox',
fieldLabel: 'System',
mode: 'local',
queryMode: 'local',
valueField: 'kurzbezeichnung',
displayField: 'kurzbezeichnung',
name: 'kurzbez',
id: 'kurzbez',
store: system,
listeners: {
select: function (combobox, kurzbezeichnung) {
var systemname = Ext.getCmp('kurzbez').getValue();
console.info(systemname);
if (systemname != '') {
Ext.getCmp('nutzung').show();
}
}

}
},{
// ---------------------
itemId: 'mycombo',
// ---------------------
xtype: 'combobox',
fieldLabel: 'The system<b> ' + this.systemname + '</b> is used',
defaultType: 'container',
id: 'nutzung',
hidden: 'true',
displayField: 'nutzung',
name: 'nutzung',
store: nutzungsgrad,
}
],
buttons: [{

},{

}]
});
problem.render(document.body);

// ---------------------
problem.on('afterrender', function () {
problem.down('#mycombo').setFieldLabel('new label');
});
// ---------------------
});

floraoma2000-extjs
14 Jun 2012, 3:26 AM
Sorry this doesn´t function
An error occurs
"problem.down('#mycombo').setFieldLabel('new label')"
is not a function

sorry but I am new to ExtJs
Thanks for help again

redraid
14 Jun 2012, 4:00 AM
Im fix error in my previous post - this error occurs because panel not rendered.
//wbr

sword-it
14 Jun 2012, 4:04 AM
Hi user,
To change the fieldLabel of any element you have to write your custom code. In extjs every fieldlabel has an attribute - 'for' which contains the value - (id of that element+ '-inputEl'). So we can find the label based on this attribute. Review the following code in which I am first getting all labels exist on the page then find out the label of second combobox & change its text.


select: function (combobox, kurzbezeichnung) { // select event of first combobox
var systemname = combobox.getValue();
if (systemname != '') {
var combo2 = Ext.getCmp('nutzung');
var labels = document.getElementsByTagName('label'); // getting the list of all label of the page
for(var i=0,totalLabels=labels.length;i<totalLabels;i++){
if(labels[i].htmlFor == (combo2.id+'-inputEl')){ // getting the label of combo2
labels[i].innerHTML = 'The system <b>' + systemname + '</b> is used'; // changing the label's innerHTML
}
}
combo2.show();
}
}