What's the correct way to get the buttons from an Ext.window.Window?

[Albareto]

Hi there,

I have a Window, something like this:



var buttons = getButtons(),
w = Ext.create('Ext.window.Window',
{
//config here...
buttons : buttons
});


Then in an event I want to iterate over this buttons, I get the window there but how to get the buttons?

I have seen that I can get the docked elements and from there the array of buttons, this is a bit overkilling in my opinion, I mean, the code would be like:



var buttons = [];
Ext.Array.each(myWindow.getDockedElements(), function(de)
{
if (is in the bottom)
{
//check if it has buttons, if so then store them in the array
}
});


In Ext 3.X there was a method in the window that returned the buttons, any idea how to get them now?

Thanks!

[ezriel]

Assign id value to the button and then use Ext.getCmp("button_id")

[Albareto]

Thanks for the reply, unfortunately I cannot do that as my buttons are generated dynamically so I don't know the ids of them or how many are going to be.

The idea behind this code is to disable them when some action is performed.

[Albareto]

Also I said that in 3.X there was a method to get them, that's not entirely true, but you could do window.buttons to retrieve them, maybe this is because buttons was not only a config but also a property of the Component? Anyway, the point is that in ExtJS 4 this is not the case anymore.

[redraid]

Try something like this (change grid to window):


// Generated buttons
{
text: 'Btn1',
btnrole: 'role1'
},
{
text: 'Btn1',
btnrole: 'role2'
}
//...

// disable/enable buttons by role
// for example in selectionchange event
selectionchange: function (grid, selected, eOpts) {
var me = grid,
selCount = selected.length,
role1Btns = me.query('button[btnrole=role1]'),
role2Btns = me.query('button[btnrole=role2]');

// Disable role1 buttons if selection empty
Ext.Array.forEach(role1Btns, function (btn) {
btn.setDisabled(selCount == 0);
});

// Disable role2 buttons if selection not empty
Ext.Array.forEach(role2Btns, function (btn) {
btn.setDisabled(selCount != 0);
});
}
//wbr

[loiane]

1 - Give an itemId to your window:

Ext.create('Ext.window.Window',{
itemId: 'mywindow',
...
});

2- Do whatever you need to do to generate the buttons

3 - Use Ext.ComponentQuery.query to retrieve the buttons from the window:
If the buttons are in a toolbar, you can use:

Ext.ComponentQuery.query('myWindow toolbar button');
The code above will return an array of all buttons that are inside a toolbar in your window.

[Albareto]

Thanks for all the replies, actually Ioiane's answer was what I was looking for. Redraid, with that I receive Elements, I was more looking for Component, I actually didn't realized there was a ComponentQuery class!

This is the solution for my case:

var buttons = Ext.ComponentQuery.query('toolbar button', myWindow);

Could also use the window id as you suggested, I don't know what would be better as I have the Window Object in my method as well.

Thanks again.

[redraid]

query method have all descendants of AbstractContainer (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-query), window descendant of container

[Albareto]

That's true, I could just do


myWindow.query('toolbar button');

with the same result.

This forum is great, with every answer I learn something new.

Thanks for your input :)