PDA

View Full Version : Can't assess Window's button



mashiki
22 Feb 2008, 8:17 AM
Hi,

Here is a window which has a disabled 'OK' button and a grid.

I want to set the OK button enabled when a row of the grid is selected.

But I can't get handle of 'OK' button element.

How can I access it?

(I tried Ext.get('btn_ok'). But it wasn't 'OK' button.)



Ext.onReady(function(){

var button = Ext.get('show-btn');

button.on('click', function(){

// left
var nav = new Ext.Panel({
title: 'search condition',
region: 'west',
split: true,
width: 180
});

var myData = [
['3m Co',71.72],
['Alcoa Inc',29.01],
['Altria Group Inc',83.81],
['American Express Company',52.55],
['American International Group, Inc.',64.13],
['AT&T Inc.',31.61]
];

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'}
]
});
store.loadData(myData);
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners:{'rowselect':function(){
alert('rowselect'); // ***** this line
}}
});

// create the Grid
var grid = new Ext.grid.GridPanel({
sm:sm,
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}
],
stripeRows: true,
autoExpandColumn: 'company',
region: 'center',
height:350,
title:'Array Grid'
});

var win = new Ext.Window({
title: 'select a row from result grid',
closable:true,
width:500,
height:250,
plain:true,
layout: 'border',
items: [nav, grid],
buttons: [{
text:'Ok',
id:'btn_ok',
disabled:true
},{
text: 'Cancel',
handler: function(){
win.hide();
}
}]

});

win.show(this);
});
});

VinylFox
22 Feb 2008, 8:28 AM
How do you know it wasn't the 'OK' button?

Also, you probably will want to use getCmp instead, so you have access to all the button specific functions.


Ext.getCmp('btn_ok').disable();
Ext.getCmp('btn_ok').enable();

para
22 Feb 2008, 8:29 AM
I'd set the id on the Window, and then access it through that.


var win = new Ext.Window({
title: 'select a row from result grid',
closable:true,
id: 'myWindow'
.....
});

var win = Ext.getCmp('myWindow');
win.buttons[0].disable();


Edit: Or do what VinylFox says.

mashiki
22 Feb 2008, 8:37 AM
Ext.getCmp('btn_ok').enable();

wonderful.

It works.

VinylFox
22 Feb 2008, 8:45 AM
You might also give some thought to the way para suggested doing it - in the long term its a better way.

/* start rambling */

Imagine your application growing in size, and before you know it you have thirty different 'OK' buttons, each with their own id's ('btn_ok_1', 'btn_ok_2', 'btn_ok_3', etc.), however if you define just your windows, you might still have thirty different windows, but those references will provide you with access to all the elements inside those windows - every button, grid, title, etc.

/* end rambling */

mashiki
22 Feb 2008, 8:46 AM
Ext.getCmp('myWindow').buttons[0].enable();

also works.

Thank you.

mashiki
22 Feb 2008, 9:03 AM
Thank you for your advice.
I'll use every object with deferent id.

And I found
Ext.getCmp(win.id).buttons[0].enable();
without 'id' also works.

para
22 Feb 2008, 9:06 AM
then you already have your win component, and can skip the getCmp() call



// if

Ext.getCmp(win.id).buttons[0].enable();

// works AND

Ext.getCmp(win).buttons[0].enable();

// works, then you should just use

win.buttons[0].enable();

mashiki
22 Feb 2008, 9:16 AM
win.buttons[0].enable(); // works

It was good. Thank you very much.