PDA

View Full Version : Adding separate menu items for each heder colum menu in a grid



darkhorni
18 Jun 2012, 1:29 AM
I have managed to add a menu item to a grid column header but it is same for all. It was supposed to be separate items for each column. This is under the store:


listeners: {
metachange: function(store,meta){
if ( !this.meta )
{
this.meta = meta;
//console.log(meta.pageSize);
// store.pageSize = meta.pageSize;
grid.reconfigure(store,meta.columns);
var menu = grid.headerCt.getMenu();
var testtest = grid.headerCt.getMenuItems();
console.log(testtest[3].menu);
console.log(testtest);
console.log(testtest[3].menu[0]);


menu.add([{
text: 'Rename the column',
menu: {
items:
[{
xtype: 'textfield',
enableKeyEvents: true,
allowBlank: false,
listeners: {
keyup: function(btn){
//console.log(btn);
var grid = btn.up('grid');
var columnDataIndex = menu.activeHeader.dataIndex;
col = grid.down('#'+columnDataIndex);
//console.log(grid, col);
//console.log(col.getHeaderMenu());
var newColumnName= this.getRawValue();
col.setText(newColumnName);
}
}
}]
}
}]);


}
}
}

So I need to add the menu item for each column separately but how?

scottmartin
25 Jun 2012, 2:11 PM
Have you stepped through your code to see if the menu data is changing as expected?

Scott.

darkhorni
25 Jun 2012, 11:25 PM
I was unable to add separate items, instead I have found a workaround.

I have added "show" listener on the menu, and when it fires it re-reads and re-writes the appropriate textfield in the menu and grid column header.




menu.add([{
text: 'Sütünu Adlandır',
disabled: (Asistan.System.LoginInfo.kategori === 'ADMIN')?false:true,
menu: {
listeners: {
show: function(btn){
var grid = btn.up('grid');
var columnDataIndex = menu.activeHeader.dataIndex;
col = grid.down('#'+columnDataIndex);
Ext.getCmp('adlandirici').setValue(col.text);
}
},
items:
[{
xtype: 'textfield',
enableKeyEvents: true,
id: 'adlandirici',
allowBlank: false,
listeners: {
keyup: function(btn){
//console.log(btn);
var grid = btn.up('grid');
var columnDataIndex = menu.activeHeader.dataIndex;
col = grid.down('#'+columnDataIndex);
//console.log(grid, col);
//console.log(col.getHeaderMenu());
var yeniSutunAdi = this.getRawValue();
col.setText(yeniSutunAdi);
}
}
}]
}
/* handler: function() {
var columnDataIndex = menu.activeHeader.dataIndex;
alert('custom item for column "'+columnDataIndex+'" was pressed');


var grid = btn.up('grid'),
col = grid.down('#column1');
console.log(grid, col);
console.log(col.getHeaderMenu());
col.setText('Renamed');
} */
},{
text: 'Satır Sayısı',
disabled: (Asistan.System.LoginInfo.kategori === 'ADMIN')?false:true,
menu: {
items: [{
xtype: 'numberfield',
name: 'satirSayisi',
id: 'SatirSayisi',
value: pageSize,
allowBlank: false,
allowDecimals: false,
minValue: 1,
maxValue: 10000,
listeners: {
change: function(){window.pageSize = this.getRawValue(); console.log(pageSize);}
}
}]
}
}]);

joshua.ball@osi.com
29 Mar 2013, 10:28 AM
Wanted to add an alternative solution in case this doesn't work for some. Since the menu is common to all grid columns, you'll need to add all menu items that you'll need into the menu and then show/hide them based on the activeHeader property of the menu. This will allow certain menu items to display based on the column that triggered then menu to be displayed.


var mainMenu = view.headerCt.getMenu();
mainMenu.on({
beforeshow: function(menu){
// If the Severity column triggered the menu, show Severity-specific menu items
if (menu.activeHeader.dataIndex == 'severity'){
for (var i=0; i<menu.items.items.length; i++){
if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
menu.items.items[i].show();
}
}
// If any other column, hide Severity-specific menu items
} else {
for (var i=0; i<menu.items.items.length; i++){
if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
menu.items.items[i].hide();
}
}
}
}
});

// Add custom menu items to the default grid menu
mainMenu.insert(mainMenu.items.length-2, [{
itemId: 'toggleSortMenuItem',
text: 'Toggle Sort',
handler: function() {
mainMenu.activeHeader.sortable = (mainMenu.activeHeader.sortable) ? false : true;
}
},{
itemId: 'severityIndicatorMenuItem',
text: 'Severity Indicator',
handler: function() {
// JB - Start here...
}
}]);