PDA

View Full Version : Custom column header menu



frankbolviken
26 Oct 2011, 12:41 AM
Hi,

Is there any possibilty of adding a custom menu for the column header?
28882

Frank

skirtle
26 Oct 2011, 1:17 AM
Yes. Take a look at the code for Ext.grid.feature.Grouping.

frankbolviken
26 Oct 2011, 1:45 AM
hmm

Could you please ellaborate? :) Perhaps provide a little example.. can't say I fully understand how to do this.

Frank
Thanks for your reply

skirtle
26 Oct 2011, 1:53 AM
Ext.grid.feature.Grouping modifies the column menu to add in some new entries. It is an example. The method injectGroupingMenu would be a sensible place to start.

frankbolviken
26 Oct 2011, 2:07 AM
So the basic idea is to create a feature like the grouping feature, and inject it into the menu?

skirtle
26 Oct 2011, 2:18 AM
Wouldn't necessarily need to be a feature. A plugin would probably do.

The way it's done in the Grouping feature isn't necessarily the only way to do it but it proves it can be done. Once you've studied how it does it you should hopefully have enough knowledge of the relevant code to figure out what works best for whatever it is you're trying to do.

frankbolviken
26 Oct 2011, 2:31 AM
When I think about it I actually tried something like this some time ago, but didn't get it to work.
I just tried to present a new dummy link in the menu with the following code, just to see if I can inject something and it would work.



Ext.define('app.feature.Entrytitle', {
extend: 'Ext.grid.feature.Grouping',
alias: 'feature.entrytitle',

groupByText: 'Customfield',

getMenuItems: function() {
var me = this,
groupByText = me.groupByText,
disabled = me.disabled,
showGroupsText = me.showGroupsText,
enableNoGroups = me.enableNoGroups,
groupMenuItemClick = Ext.Function.bind(me.onGroupMenuItemClick, me),
groupToggleMenuItemClick = Ext.Function.bind(me.onGroupToggleMenuItemClick, me);

// runs in the scope of headerCt
return function() {
var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
o.push('-', {
iconCls: Ext.baseCSSPrefix + 'group-by-icon',
itemId: 'entryTitleItem',
text: groupByText,
handler: groupMenuItemClick
});
return o;
};
}
});


But I only got the following error on runtime: *Uncaught TypeError: object is not a function* when i tried to initialize it:



Ext.create('app.feature.Entrytitle', {
enableGroupingMenu: true
})],


I've put the following code in the grid, to pull in the required code:

Ext.require([ 'app.feature.Entrytitle'
]);

Any idea why this isnt working? From my point of view it really should work.

skirtle
26 Oct 2011, 2:37 AM
Stacktrace? What line does the error occur on?

frankbolviken
26 Oct 2011, 2:40 AM
The error occures on the Ext.create('app.feature.Entrytitle', {... which I pasted on a previous post.

Uncaught TypeError: object is not a function
(anonymous function)
Ext.ClassManager.instantiateext-all-debug.js:3774
(anonymous function)ext-all-debug.js:1508
(anonymous function)DynamicGrid.js:23

skirtle
26 Oct 2011, 2:59 AM
Without context it's difficult to be sure but I'd guess that you're calling Ext.require() in the wrong place. Try moving this dependency into the requires section of your Ext.define() or even just put it before your call to Ext.onReady().

For diagnostic purposes it might also be interesting to try Ext.syncRequire():

http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-syncRequire

frankbolviken
26 Oct 2011, 4:33 AM
Again, thank you for your replies!

Again, I can't seem to figure out how to solve this easy.
Let's say we want to create a custom feature, and enable this on the grid. How can we achieve this in a simple manner? You don't have any simple sample where this is achieved? Only need a button, which is supposed to trigger some action serverside. I've tried to get my head around the grouping code, but it's so much magic happening that i'm only getting confused :(

frankbolviken
27 Oct 2011, 12:58 AM
Ok,

I managed to get a working code now, but I have a little problem. When I enable this feature on the grid, and also enable grouping, only grouping items is visible in the menu. If i disable grouping, my menuitem is correctly shown. Any idea why it's overwriting the other feature? My guess is that it's something wrong with the inject method, but I can't seem to figure out what.

Any idea?


Ext.define('app.feature.Entrytitle', { extend: 'Ext.grid.feature.Feature',
alias: 'feature.entrytitle',

constructor: function() {
var me = this;

me.collapsedState = {};
me.callParent(arguments);
},

entryTitleText : 'test',
enableEntrytitleMenu : true,

// perhaps rename to afterViewRender
attachEvents: function() {
var me = this,
view = me.view;
if (me.enableEntrytitleMenu) {
me.injectEntryTitleMenu();
}
},


injectEntryTitleMenu: function() {
var me = this,
view = me.view,
headerCt = view.headerCt;
headerCt.showMenuBy = me.showMenuBy;
headerCt.getMenuItems = me.getMenuItems();
},

showMenuBy: function(t, header) {
var menu = this.getMenu(),
entryTitleMenuItem = menu.down('#entryTitleMenuItem');

Ext.grid.header.Container.prototype.showMenuBy.apply(this, arguments);
},

getMenuItems: function() {
var me = this,
entryTitleText = me.entryTitleText,
entryTitleClick = Ext.Function.bind(me.onEntryTitleClick, me);

// runs in the scope of headerCt
return function() {
var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
o.push('-', {
itemId: 'entryTitleMenuItem',
text: entryTitleText,
handler: entryTitleClick
});
return o;
};
},


onEntryTitleClick: function(menuItem, e) {
var me = this,
menu = menuItem.parentMenu,
hdr = menu.activeHeader;
app.events.fireEvent('entrytitle', hdr.dataIndex)
},

/**
* Gets the related menu item for a dataIndex
* @private
* @return {Ext.grid.header.Container} The header
*/
getMenuItem: function(dataIndex){
var view = this.view,
header = view.headerCt.down('gridcolumn[dataIndex=' + dataIndex + ']'),
menu = view.headerCt.getMenu();

return menu.down('menuitem[headerId='+ header.id +']');
},


});