PDA

View Full Version : Finding a component?



alejandroNNU
25 Oct 2013, 5:47 AM
I have controller with a controller action "onButtonClick" which looks like this:


onButton: function(button, e, eOpts) {
var panel = button.up('#gridPanel');
panel.setSize(135, 135);


var label = button.nextSibling('#mainLabel');
label.setText('Complete');


so when I click the button, the grid panel changes size no problem, but the label does not change it's text, the browser throws out the error:

Uncaught TypeError: Cannot call method 'setText' of null

I have no clue why the second half isn't working, why isn't it finding the label/setting it to null? This is what the grid panel looks like btw, does it have something to do with the button and label being "docked" left and top? am I not supposed to be using nextSibling? Please help.


Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',


height: 250,
itemId: 'gridPanel',
width: 400,
title: 'My Grid Panel',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
dockedItems: [
{
xtype: 'button',
dock: 'left',
itemId: 'textChange',
width: 100,
text: 'MyButton'
},
{
xtype: 'label',
dock: 'top',
itemId: 'mainLabel',
width: 100,
text: 'My Label'
}
]
});


me.callParent(arguments);
}


});

T.Wen
25 Oct 2013, 7:34 AM
try var label = panel.down('#mainLabel');

alejandroNNU
25 Oct 2013, 7:36 AM
yes that works, thank you, but I'm just trying to understand why button.nextSibling does not work, why can't I find it like that?

T.Wen
25 Oct 2013, 7:44 AM
because it's not in the same container where the button is. When you use dock="something", a container is created to wrap the component you want to dock and that container is then used for positioning.

alejandroNNU
25 Oct 2013, 7:46 AM
oh i see, so if I remove the "dock", then it should work right?

ettavolt
28 Oct 2013, 3:35 AM
No. The problem is a bit different: next/previousSibling() does not work for dockedItems, but for items only. But works for items in any dockedItem container (like a toolbar).