2

I'm here with so easy question, but couldn't find it... anyway, below you can see the code. This is panel with items inside it. What i want is to change value of textfield with name 'intIP', it's inside panel, which is inside panel. How can i do that? I found info about forms (.getForm method, but panel doesn't have such)

Thanks a lot in advance

http://jobtask.h19.ru/ - panel

var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: title,
    renderTo: document.body,
    layout: {
        type: 'vbox',
        align: 'stretch',
    },
    items: [{
        title: 'Details',
        name: 'detPanel',
        items: [{
            name: 'intIP',
            fieldLabel: 'internal IP',
            xtype: 'textfield',
            readOnly: true
        }],
    }]
});

3 Answers 3

7

In ExtJS 4 you should be able to use Ext.Container.query() method, which when passed a correct selector will return array of children components that match the selector.

resultsPanel.query('textfield[name="intIP"]')[0].setValue('New value')

Details on how to create selectors are here: http://localhost/ext-4.0.2/docs/index.html#/api/Ext.ComponentQuery


In ExtJS3: Every Ext.Container has a find() method, which can be ginven a name of property (name,xtype,itemId etc) and a value ('intP', 'textfield', 'fieldId'). It will return an array of chlderen components (at any level of nesting) where property has the indicated value. If in your container only one field has a name 'intP' then you can just use:

resultsPanel.find('name','intP')[0].setValue('New value')

In both ExtJS3 and ExtJS4 if you have more children components with same name, using additional unique property like itemId should help.

7
  • but panel object has no method .find
    – alex
    Aug 20, 2011 at 13:46
  • :( i think i'm doing smth totally wrong. if i insert this line after object creation resultsPanel.find('name','intIP')[0].setValue('New value'); then chrome console tells me that Uncaught TypeError: Object [object Object] has no method 'find'. Stupid me, I know it must be very easy, such obvious action
    – alex
    Aug 20, 2011 at 13:52
  • Ah. So it's ExtJS 4 then (What I wrote is relevant to ExtJS 3).
    – Mchl
    Aug 20, 2011 at 13:53
  • oh yeah it's extJS, sorry i didn't mentioned
    – alex
    Aug 20, 2011 at 13:55
  • and updated it once again, because child() will only return direct children components.
    – Mchl
    Aug 20, 2011 at 13:58
2

Specify an itemId for the textbox and use resultsPanel.getComponent('itemId').setValue('Value')

Here itemId will be limited to the scope of the panel, as opposed to id which can be used globally

You can also use resultsPanel.query('#itemId') or resultsPanel.down('#itemId')

Check the docs which works for you best

0

If you are going to put input fields into the panel then consider using Ext.form.Panel. Form panel has methods to find its input components like findField .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.