PDA

View Full Version : How to change grid column header name on combo box select at run time



Soumya Maharana
5 Nov 2012, 11:35 PM
Hi Everyone,
I want to change the column name of a grid on selecting a value from the combo box.

Please share some information

Regards,
Soumya

vietits
6 Nov 2012, 12:00 AM
FYI:


grid.headerCt.getHeaderAtIndex(columnIndex).setText("New Title");

Soumya Maharana
6 Nov 2012, 12:43 AM
Hi Vietits

Thank you very much for your reply.

Are you sure it will work?

Regards,
Soumya

Soumya Maharana
6 Nov 2012, 1:06 AM
Hi
Below is my code:

{
xtype: 'combo',
fieldLabel: 'View by:',
labelWidth: 50,
store: Category,
queryMode: 'local',
displayField: 'CategoryName',
emptyText: 'Select Category',
listeners: {
select: function (field, newValue, oldValue) {
var store = Ext.getStore('Home.UnreadAlertStore');
var selectedValue = field.getValue();
if (selectedValue == 'accession') {
store.proxy.url = 'Data/value1.json';
 
 
var x = Ext.getCmp('AlertGrid');
x.headerCt.getHeaderAtIndex(columnIndex).setText("New Title");
 
 
 
}
else if (selectedValue == 'Patient') {
store.proxy.url = 'Data/value2.json';
}
else if (selectedValue == 'Visit') {
store.proxy.url = 'Data/value3.json';
}
else if (selectedValue == 'date') {
store.proxy.url = 'Data/value4.json';
}
store.load();
}
},
renderTo: Ext.getBody()
 
}


Here I have a Combo Box with different values that is docked to the grid. I want, on selection of any of the drop down values, my grid column header as well as the store should change.

I am able to change the store but unable to change the grid column header.

Here is the code that I wrote for changing the Column Header



var x = Ext.getCmp('AlertGrid');
x.headerCt.getHeaderAtIndex(columnIndex).setText("New Title");
This code is not working for mePlease help me in this regard.

nagalla038
6 Nov 2012, 1:28 AM
FYI:


grid.headerCt.getHeaderAtIndex(columnIndex).setText("New Title");




This piece of code is not working for me:-/

tvanzoelen
6 Nov 2012, 1:30 AM
What is your columnIndex? It should be an int. Index 0 for example is the first column


grid.headerCt.getHeaderAtIndex(0).setText("New Title");

works for me.

Albareto
6 Nov 2012, 1:31 AM
It is working for me, as far as columnIndex gets a correct index...

Farish
6 Nov 2012, 1:32 AM
I havent tried the way vietits has suggested. If that works, that is a great shortcut. Alternatively, you can use the reconfigure method of the grid panel:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

tvanzoelen
6 Nov 2012, 1:33 AM
reconfigure ? that would be a too heavy measure for the task. :)

I think the columnIndex is not defined in this case.

Albareto
6 Nov 2012, 1:34 AM
Yep, I thought the same, you just were faster :P

Soumya Maharana
6 Nov 2012, 1:45 AM
Hey guys

seriously it doesn't work.

may be you can check my code ones and say me where exactly is the problem.

nagalla038
6 Nov 2012, 1:46 AM
What is your columnIndex? It should be an int. Index 0 for example is the first column


grid.headerCt.getHeaderAtIndex(0).setText("New Title");

works for me.

This doesn't works for me. I just replaced the grid with my grid alias name since im using the MVC architecture.Please help me in this regard.

grid.headerCt.getHeaderAtIndex(0).setText("New Title");

Replaced by

aliasname.headerCt.getHeaderAtIndex(0).setText("New Title");

tvanzoelen
6 Nov 2012, 1:47 AM
var x = Ext.getCmp('AlertGrid');
x.headerCt.getHeaderAtIndex(columnIndex).setText("New Title");

Above is your code. Where did you have set the value for the columnIndex? What is its value?

getHeaderAtIndex(columnIndex) , where did you initialise that var?

Soumya Maharana
6 Nov 2012, 1:50 AM
Column index is 0 and I haven't initialized the var any where. "AlertGrid" is my grid id.

tvanzoelen
6 Nov 2012, 1:51 AM
@nagalla038 you must have a proper reference to the grid. Even in MVC there are possibilties to get it.

You an use for example
component.down('#itemid')

tvanzoelen
6 Nov 2012, 1:53 AM
If colum,nIndex is undefined it won't work. So initialize it.