set an id to tabpanel

[victorvidigal]

Hello,
I'm trying to set an specifi id to tabpanel but I can't do it.
I try to find a componente with name tabEndereco in firebug but there is no exists.

I need a specific id to build tests with selenium.

can somebody help me?

This is my code:

        return formPerfil = Ext.create('Ext.form.Panel', {
            bodyStyle: 'padding:5px',
            id: 'formPerfil',
            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'side'
            },
            layout: 'fit',
            defaults: {
                anchor: '95%'
            },
            items: [{
                layout: 'column',
                border: false,
                items: [{
                    columnWidth: .5,
                    border: false,
                    layout: 'anchor',
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'Nome',
                        id: 'tfNome',
                        name: 'tfNome',
                        value: vNome,
                        width: 200,
                        labelWidth: 37,
                        maxLength: 150,
                        allowBlank: false
                    }]
                }, {
                    columnWidth: .5,
                    border: false,
                    layout: 'anchor',
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'Sobrenome',
                        value: vSobrenome,
                        id: 'tfSobrenome',
                        name: 'tfSobrenome',
                        maxLength: 150,
                        width: 250,
                        labelWidth: 70,
                        allowBlank: false
                    }]
                }]
            }, {
                xtype: 'tabpanel',
                id: 'tabpanel',
                itemId: 'tabpanel',
                plain: true,
                activeTab: 0,
                height: 230,
                defaults: {
                    bodyStyle: 'padding:10px'
                },
                items: [{
                    title: 'Endereço',
                    layout: 'column',
                    border: false,
                    itemId: 'tabEndereco',
                    items: [{
                        columnWidth: .4,
                        border: false,
                        layout: 'anchor',
                        defaultType: 'textfield',
                        itemId: 'tabEndereco',
                        items: [{
                            value: vLogradouro,
                            id: 'tfLogradouro',
                            name: 'tfLogradouro',
                            width: 250,
                            labelWidth: 70,
                            maxLength: 150,
                            fieldLabel: 'Logradouro',
                            allowBlank: true
                        }

[tobiu]

you are mixing id and itemId. i hope you are aware of the difference, if not take a look into the api docs.

Ext.getCmp('tabpanel').getComponent('tabEndereco');

[victorvidigal]

Thank's but my problem isn't get components by id.
My problem is that tabs of tabpanel are not with defined id. For example, if I look at page code (firebug) there aren't components with id tabEndereco.
I tried use only id or only itemId.

[manso]

I don't understand why the id of the component does not appear in the firebug

[flanders]

You cannot find the id 'tabEndereco', because you are not specifying it. However, you are specifying an itemId 'tabEndereco' twice. (Which is valid because it is in two different collections).

Tobias was right pointing you to the difference between id and itemId
http://docs.sencha.com/ext-js/4-0/#!...mponent-cfg-id

[victorvidigal]

thank's
it's allright now.

                xtype: 'tabpanel',
                id: 'tabpanel',
                plain: true,
                activeTab: 0,
                height: 230,
                defaults: {
                    bodyStyle: 'padding:10px'
                },
                items: [{
                    title: 'Endereço',
                    layout: 'column',
                    border: false,
                    id: 'tabEndereco',
                    items: [{
                        columnWidth: .4,
                        border: false,
                        layout: 'anchor',
                        defaultType: 'textfield',
                        items: [{
                            value: vLogradouro,
                            id: 'tfLogradouro',
                            name: 'tfLogradouro',
                            width: 250,
                            labelWidth: 70,
                            maxLength: 150,
                            fieldLabel: 'Logradouro',
                            allowBlank: true