PDA

View Full Version : Targeting a component



alejandroNNU
24 Oct 2013, 11:27 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? Thanks for the help btw, i really appreciate it.


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);
}


});

Salakar
25 Oct 2013, 2:43 AM
Try:


var label = panel.down('#mainLabel');
label.setText('Complete');


//or if you are actually trying to set the button text then just do:
button.setText('Complete');

thanks

alejandroNNU
25 Oct 2013, 5:45 AM
edit: scratch that, it does work, thank you, anyone have any idea why button.nextSibling didn't work though?

no, that doesn't work either unfortunately.... and I am trying to change the text on a separate label within the grid panel, not on the button itself.

Salakar
25 Oct 2013, 5:57 AM
if you want to use nextSibling try

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

Might work, though, the selector string is optional so you could just use nextSibling() without using the 'label'