I have a component as follow :

{
    xtype: 'fieldcontainer',
    layout: 'hbox',
    id: 'article-level-container',
    defaultType: 'textfield',
    fieldDefaults: {
        labelAlign: 'top'
    },
    items: [{
        fieldLabel: 'LEVEL',
        name: 'artLevel',
        inputWidth: 216,
        margins: '0 5 5 0',
        allowBlank: false,
        fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;'
    }, {
        fieldLabel: 'VALUE',
        name: 'artValue',
        inputWidth: 216,
        allowBlank: false,
        blankText: 'zorunlu alan, boş bırakılamaz',
        fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;',
        listeners: {
            change: function(textfield, newValue, oldValue) {
                if (oldValue == 'undefined' || newValue == '') {
                    Ext.getCmp('btnArticleSave').disable();
                } else {
                    Ext.getCmp('btnArticleSave').enable();
                }
            }
        }
    }]
} 

I want to get second item fieldLabel value ( in this case VALUE ).

• How can I get this field value outside the onReady function?
• How can I change this field label with new value ( I want to change fieldlabel with selected combobox value )

UPDATE I tried the following :

var artField = Ext.ComponentQuery.query('#articleValueField');
console.log(artField);

I have a component as follow :

{
    xtype: 'fieldcontainer',
    layout: 'hbox',
    id: 'article-level-container',
    defaultType: 'textfield',
    fieldDefaults: {
        labelAlign: 'top'
    },
    items: [{
        fieldLabel: 'LEVEL',
        name: 'artLevel',
        inputWidth: 216,
        margins: '0 5 5 0',
        allowBlank: false,
        fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;'
    }, {
        fieldLabel: 'VALUE',
        name: 'artValue',
        inputWidth: 216,
        allowBlank: false,
        blankText: 'zorunlu alan, boş bırakılamaz',
        fieldStyle: 'text-align: right; font-size: 13pt; background-color: #EAFFCC;',
        listeners: {
            change: function(textfield, newValue, oldValue) {
                if (oldValue == 'undefined' || newValue == '') {
                    Ext.getCmp('btnArticleSave').disable();
                } else {
                    Ext.getCmp('btnArticleSave').enable();
                }
            }
        }
    }]
} 

I want to get second item fieldLabel value ( in this case VALUE ).

• How can I get this field value outside the onReady function?
• How can I change this field label with new value ( I want to change fieldlabel with selected combobox value )

UPDATE I tried the following :

var artField = Ext.ComponentQuery.query('#articleValueField');
console.log(artField);

• javascript
• extjs

2 Answers 2

A few ways but common is to use Ext.ComponentQuery:

Give your field an itemId in its config e.g. itemId: 'theField':

 var field= Ext.ComponentQuery.query('#theField')[0];
 field.setFieldLabel(valueFromCombo);

Add an on change listener to your combo, you can use up and down (which are also component queries)

listeners: {
  change: function(combo) {
    var form = combo.up('#form');
    var field = form.down('#theField');
    field.setFieldLabel(lookupValueFromCombo);
  }
}

Remember any config settings in ext js will get a setter and getter, thus fieldLabel has getFieldLabel() & setFieldLabel(s) methods.

edit above is only with ext js 4.1+ with ext js 4.0+ you can do:

field.labelEl.update('New Label');

to get the combobox selected item outside the combo listener

yourComboboxName.on('change', function (combo, record, index) {

            alert(record);  // to get the selected item

            console.log(record);  // to get the selected item

        });