PDA

View Full Version : Ext.ux.grid.GridViewMenuPlugin



ThorstenSuckow
4 Nov 2008, 11:15 AM
Version 0.3
06-January-2010
- fixed: fixed an issue where the menu would not be proeprly aligned when its shown for the first time
- enhancement: added Ext 3.1 support

Version 0.2RC1
18-April-2009

- enhancement: added examples for regular- and grouping-grid
- enhancement: added build tools for the project
- enhancement: added functionality to support Ext.grid.GroupingView
- fixed: view property would not be initialized at startup; changed to call "getView()" to make sure view is available when plugin is initialized
- enhancement: grid's "enableHdMenu" can now be used to disable rendering the plugin and does not throw an exception anymore if it is set to "true"


-----

Hi Ext enthusiasts,

this feels somewhat like the night before christmas for me: Before I leave and work on the remaining tickets for my larger application, I want to give the community this neat little extension that renders a menu in the upper right of a grid's header. It's intented to replace the default header's column menu for hiding/showing columns.

If you want to use this extension, simply add it as a plugin to your grid's configuration. Please note, that the grid's "enableHdMenu"-property has to be set to "false" in order to get this working.

I have attached a screenshot which shows the use with custom styles. The default comes with the menu button you already know from the header's column menu.

The source can be checked out at http://code.google.com/p/ext-ux-grid-gridviewmenuplugin/

The project home is located at http://www.siteartwork.de/gridviewmenuplugin

Have fun!

Regards

Thorsten


http://www.siteartwork.de/images/gridviewmenuplugin.png
Image shows the plugin in use with a regular view


http://www.siteartwork.de/images/ext-ux-gridviewmenuplugin_grouping.jpg
Image shows the plugin in use with a grouping view




If you want to use the same styles as above for the menu button, use this override


.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {
background-image:url(btn.png);
width:16px;
}

a.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn:hover {
background-position:-16px center;
}


and the attached image:

akannu
4 Nov 2008, 12:32 PM
This is great. We implemented something like this as well but by adding a column to the end. The issue we have is it is hidden when grid has horizontal scroll. I assume you don't have this problem and it does not look like from the screenshot.

ThorstenSuckow
5 Nov 2008, 4:26 AM
This is great. We implemented something like this as well but by adding a column to the end. The issue we have is it is hidden when grid has horizontal scroll. I assume you don't have this problem and it does not look like from the screenshot.

In fact the menu button doesn't scroll with the viewport, so this will give you easier access to the show/hide menu. It's tested with IE7, FF3, Chrome and Safari3.1 and works without problems.

garraS
5 Nov 2008, 6:11 PM
How can I use this plugin? Is awesome!


/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '../../../resources/images/default/s.gif'

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

var asd = new Ext.ux.grid.GridViewMenuPlugin();

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
enableHdMenu: false,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
plugins: [asd]
},
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});

ThorstenSuckow
5 Nov 2008, 6:25 PM
Hi garraS,

use this code for your grid:



// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
enableHdMenu: false,
plugins: [asd],
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});


Notice that the plugin was added to the plugin list of the grid itself, not to the grid's view.

HTH

Thorsten

garraS
5 Nov 2008, 7:11 PM
Ok, but returns me this error:


this._view is null
this._view.initElements = this._view.initElements.createSequence(

file:///F:/AppServ/www/ext-2.2/examples/e/GridViewMenuPlugin/Ext.ux.grid.GridViewMenuPlugin.js
Line 90
:(

ThorstenSuckow
5 Nov 2008, 7:18 PM
Ok, but returns me this error:


this._view is null
this._view.initElements = this._view.initElements.createSequence(

file:///F:/AppServ/www/ext-2.2/examples/e/GridViewMenuPlugin/Ext.ux.grid.GridViewMenuPlugin.js
Line 90
:(

Yap sorry, my fault. It's because you did not create a view object yourself and let Ext do the magic.

I'll fix this, in the meantime you can use a grid setup like this:



// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
enableHdMenu: false,
view : new Ext.grid.GridView(/*optionally your config object in here - usually the stuff you add to "viewConfig"*/),
plugins: [asd],
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

garraS
5 Nov 2008, 7:32 PM
Now it's work! :)

Can you share the image that you use for this plugin?

Thanks!

ThorstenSuckow
5 Nov 2008, 7:38 PM
Can you share the image that you use for this plugin?

Thanks!


Sure... I've updated my first post, you'll find everything you need there.

garraS
5 Nov 2008, 7:39 PM
Thank you so much!

garraS
5 Nov 2008, 7:57 PM
You are missing display:block;


.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {
background-image:url(btn.png);
width:16px;
display:block;
}

a.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn:hover {
background-position:-16px center;
}

mystix
5 Nov 2008, 8:57 PM
Yap sorry, my fault. It's because you did not create a view object yourself and let Ext do the magic.

the fix is actually even simpler than that :)

in the plugin's init() method, simply change the following line


this._view = grid.view;


to


this._view = grid.getView();


and voila. enjoy ;)

mystix
5 Nov 2008, 10:01 PM
also found that moving repeating the following call


this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight-1)+'px';


to in the plugin's init() method like so


this._view.on('refresh', function() {
this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight-1)+'px';
}, this);


works better for auto-configured grids (i.e. grid meta sent from the server).

solved by hooking into the gridview's onLayout() method.

complete override (including fix from previous post):


Ext.override(Ext.ux.grid.GridViewMenuPlugin, {
init : function(grid)
{
if (grid.enableHdMenu === true) {
throw("Ext.ux.grid.GridViewMenuPlugin - grid\"s \"enableHdMenu\" property has to be set to \"false\"");
}

var v = this._view = grid.getView();
v.afterMethod('initElements', this.initElements, this);
v.afterMethod('initData', this.initData, this);
v.afterMethod('onLayout', this._onLayout, this); // auto-size plugin on view layout
v.beforeMethod('destroy', this._destroy, this);

this.colMenu = new Ext.menu.Menu({
listeners: {
scope: this,
beforeshow: this._beforeColMenuShow,
itemclick: this._handleHdMenuClick
}
});
this.colMenu.override({
show : function(el, pos, parentMenu){
this.parentMenu = parentMenu;
if(!this.el){
this.render();
}
this.fireEvent("beforeshow", this);

// show menu and constrain to viewport if necessary
// ( + minor offset adjustments for pixel perfection)
this.showAt(
this.el.getAlignToXY(el, pos || this.defaultAlign, [Ext.isSafari? 2 : 1, 0]),
parentMenu,
true // true to constrain
);
}
});
},

_beforeColMenuShow : function(menu) {
this._view.beforeColMenuShow.call(this, menu);

// menu title tweak
this.colMenu.insert(0, new Ext.menu.Separator());
this.colMenu.insert(0, new Ext.menu.TextItem({
text: String.format(
'<img src="{0}" class="x-menu-item-icon x-cols-icon" />{1}',
Ext.BLANK_IMAGE_URL,
this._view.columnsText
),
style: 'line-height:16px;padding:3px 21px 3px 3px;'
}));
},

/**
* Hooks into the view's onLayout method and fits the menu to the grid header
* @param vw
* @param vh
*/
_onLayout: function(vw, vh) {
this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight - 1) + 'px';
}
});

ThorstenSuckow
6 Nov 2008, 5:38 AM
You are missing display:block;


.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {
background-image:url(btn.png);
width:16px;
display:block;
}

a.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn:hover {
background-position:-16px center;
}


Well, I was assuming you load the original css and load the override afterwards, thus "display:block" would not be needed.

ThorstenSuckow
6 Nov 2008, 5:40 AM
lots of good stuff


If you are among the three things I would take with me on a deserted island, it's your own fault!

mystix
6 Nov 2008, 7:37 AM
If you are among the three things I would take with me on a deserted island, it's your own fault!

well thank goodness i'm not a thing.

jay@moduscreate.com
6 Nov 2008, 1:28 PM
Thorsten, awesome dude!!! Saved me from having to write it. Thanks :-D

ThorstenSuckow
8 Nov 2008, 4:59 PM
Thorsten, awesome dude!!! Saved me from having to write it. Thanks :-D

Always glad if I can help ;)

mystix
9 Nov 2008, 8:37 PM
for some strange reason this


this.colMenu.show(t, 'tr-br?');

causes my gridviewmenu to run off the bottom of my viewport when the menu list is too long, and subsequently causes a permanent mess-up of my layout until the browser is refreshed.

changing it to this


this.colMenu.show(t, 'tr-tl?');

fixes the issue, but might be a weird place to have the menu displayed.

ThorstenSuckow
9 Nov 2008, 11:32 PM
Good morning!


for some strange reason this


this.colMenu.show(t, 'tr-br?');

causes my gridviewmenu to run off the bottom of my viewport when the menu list is too long, and subsequently causes a permanent mess-up of my layout until the browser is refreshed.

changing it to this


this.colMenu.show(t, 'tr-tl?');

fixes the issue, but might be a weird place to have the menu displayed.

do you have a screenshot?

Any first guess if this might be a bug in Ext or do you think this is related to the position of the menu button within the dom?

Ytorres
10 Nov 2008, 12:53 AM
I haven't the utility for now but, nice work MindPatterns ! :)

Have you setting up a live Demo ?

mystix
11 Nov 2008, 2:04 AM
Good morning!



do you have a screenshot?

Any first guess if this might be a bug in Ext or do you think this is related to the position of the menu button within the dom?

scratch that "tr-tl" fix. there appears to be an unreported bug (imo) in Ext.menu.Menu's show() method -- the menu never attempts to constrain itself to its container.

i've updated the override in post #13 with the new init() method (i've also removed the incorrect override i posted for the initElements() method -- the final call to


this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight - 1) + 'px';

is required in order to correctly display the plugin's icon when the grid is initially rendered)



here's a test case demonstrating the problem (try it with and without the call to the colMenu.override()):


Ext.onReady(function() {
window.resizeTo(400, 300);

new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'grid',
monitorResize: true,
store: new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
]
}),
enableHdMenu: false,
plugins: [new Ext.ux.grid.GridViewMenuPlugin()],
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: function(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: function(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid'
}
});
});

ThorstenSuckow
11 Nov 2008, 3:27 AM
Mystix, thanks, the next release will definitely be named after you.

However, do you think it makes sense to add the "show" override for the colMenu? If it's a current bug with Ext JS, I might consider waiting for the official fix instead of adding it to the trunk.

mystix
11 Nov 2008, 5:23 AM
However, do you think it makes sense to add the "show" override for the colMenu? If it's a current bug with Ext JS, I might consider waiting for the official fix instead of adding it to the trunk.


it'd probably be good to leave the override in there for now until there's some form of acknowledgement that it really is a bug, then remove it when it's no longer needed (your plugin is in SVN after all ;) ). anyhow, the colMenu.override also addresses a strange 1 to 2 pixel offset issue (on FF / Safari) which i haven't had time to look at.

[edit 1]
bug report posted here: http://extjs.com/forum/showthread.php?t=52475
in the event you choose to exclude the colMenu.override, here's an override which directly fixes Ext.menu.Menu:


Ext.override(Ext.menu.Menu, {
// new custom config which fixes minor pixel offset issue when menus are displayed
defaultOffsets: [Ext.isSafari? 2 : 1, 0],

// bugfix for Ext.menu.Menu not constrained to viewport
show: function(el, pos, parentMenu){
this.parentMenu = parentMenu;
if(!this.el){
this.render();
}
this.fireEvent("beforeshow", this);

// show menu and constrain to viewport if necessary
// ( + minor offset adjustments for pixel perfection)
this.showAt(
this.el.getAlignToXY(el, pos || this.defaultAlign, this.defaultOffsets),
parentMenu,
true // true to constrain
);
}
});


[edit 2]
updated the override in post #13 with a _beforeColMenuShow() tweak that adds a menu title. enjoy ;)

chalu
12 Nov 2008, 4:57 AM
Has anyone used this with grouping :-/ I tried testing it with the example at examples/grid/grouping.html I edited grouping.js to use the plugin. We no longer have the usual grouping behaviour on grid columns. :-/:-/

ThorstenSuckow
12 Nov 2008, 5:04 AM
Has anyone used this with grouping :-/ I tried testing it with the example at examples/grid/grouping.html I edited grouping.js to use the plugin. We no longer have the usual grouping behaviour on grid columns. :-/:-/

Hi Chalu,

the plugin is only for showing/hiding columns, as it utilizes existing functionality from Ext.grid.GridView, _not_ from Ext.grid.GroupingView.

HTH

Thorsten

mystix
13 Nov 2008, 8:09 PM
noticed something new today: if the grid is initially rendered without any rows, then the gridviewmenuplugin fails to appear.

the plugin is there, and it's rendered, but it doesn't appear until the first row is added to the grid / a column is sorted. to resolve this, the menu button should simply hook into the gridview's onLayout() method and resize itself accordingly.

i've updated the above patch to handle this (updated patch also handles auto-configured grids correctly).

[edit]
one final thing i haven't managed to resolve -- if no vertical scrollbar is present when the plugin is initially rendered, and there are more columns than can fit into the grid, then the last column's header will be partially hidden behind the menu button. the appearance of a vertical scrollbar later on (i.e. when there are more rows than can fit) resolves this issue. i've temporarily worked around this by giving all grids using this plugin the following viewConfig


viewConfig: {
forceFit: true
}

Condor
17 Nov 2008, 8:59 AM
Your code fails if the handleHdMenuClick or beforeColMenuShow handler needs the view in scope (example: see here (http://extjs.com/forum/showthread.php?p=251504#post251504)).

I suggest using this override:

Ext.override(Ext.ux.grid.GridViewMenuPlugin, {
_handleHdMenuClick : function() {
return this._view.handleHdMenuClick.apply(this._view, arguments);
},
_beforeColMenuShow : function() {
var _colMenu = this._view.colMenu;
this._view.colMenu = this.colMenu;
this._view.beforeColMenuShow.apply(this._view, arguments);
this._view.colMenu = _colMenu;
}
});

Secondly, why do you completely disallow enableHdMenu:true? I think you should only disallow enableColumnHide:true.

ThorstenSuckow
17 Nov 2008, 9:30 AM
Your code fails if the handleHdMenuClick or beforeColMenuShow handler needs the view in scope .


I know, it's by design: I wanted to write as less code ass possible to reuse existing code. That's why I bend the scope to the amount JS allows me to.



Secondly, why do you completely disallow enableHdMenu:true? I think you should only disallow enableColumnHide:true.

Again, it's by design. As stated above, there is only either/or: Use the default hdMenu, or use the plugin to use the original-hdmenu in the upper right of the grid.

mystix
17 Nov 2008, 6:10 PM
I know, it's by design: I wanted to write as less code ass possible to reuse existing code. That's why I bend the scope to the amount JS allows me to.

might be a good idea to include an example of additional scope "bending" then? :-?
(as in condor's code override for the protected _beforeColMenuShow() method)

on 2nd thought, @condors _beforeColMenuShow() override should be used as the default behaviour imho -- your code will then convey the correct message that some non-trivial scope manipulation is taking place.

IT100
19 Nov 2008, 4:11 AM
If I view correctly:

http://www.siteartwork.de/gridviewmenuplugin/disk.png Ext.ux.grid.GridViewMenuPlugin at google-code (http://code.google.com/p/ext-ux-grid-gridviewmenuplugin/)

shows a screenshot of a groupingview... but i can't seem to find the complete example... does it use the livegrid code? As I would love to use your code for my groupingview...

btw: Very nice & impressive work Mindmatters..


Regards,
Chris.

ThorstenSuckow
19 Nov 2008, 4:23 AM
If I view correctly:

http://www.siteartwork.de/gridviewmenuplugin/disk.png Ext.ux.grid.GridViewMenuPlugin at google-code (http://code.google.com/p/ext-ux-grid-gridviewmenuplugin/)

shows a screenshot of a groupingview... but i can't seem to find the complete example... does it use the livegrid code? As I would love to use your code for my groupingview...

btw: Very nice & impressive work Mindmatters..


Regards,
Chris.


Hi Chris,

the grid in the screenshot does indeed use a GroupingView, but it's not build upon the livegrid (though it does work with the livegrid, as I'm using it as a plugin for a livegrid-driven component myself). If you do not need the "grouping"-options in your menu, then yes, you can use the plugin by simply adding it to your "plugins" configuration property. Somewhere on the first page should be a source code example posted by another user.

Considering the feedback the plugin received, the next release ("mystix" milestone ;) ) will be more flexible and I'm currently looking into adapting some controls for grouping functionality. The next release is scheduled for the beginning of next week.

HTH

Thorsten

IT100
19 Nov 2008, 4:31 AM
Great! I'll be looking forward to see a working update. (and will licence it)

Keep up the good work & the coffee flowing ;)

regards,
Chris.

ThorstenSuckow
19 Nov 2008, 4:33 AM
Great! I'll be looking forward to see a working update. (and will licence it)

Keep up the good work & the coffee flowing ;)

regards,
Chris.

Hi Chris,

no need to license it - the Ext.ux.grid.GridViewMenuPlugin is published under the LGPL and should be fully compliant with the Ext JS license & their FLOSS exceptions!

~o) Waiting for lunch, the coffee maker is on the hold ;)

mystix
27 Nov 2008, 12:27 AM
just a heads up -- menu.css has been updated in SVN, so the _beforeColMenuShow() code needs to be altered slightly, like so:


_beforeColMenuShow : function(menu) {
this._view.beforeColMenuShow.call(this, menu);

// menu title tweak
this.colMenu.insert(0, new Ext.menu.Separator());
this.colMenu.insert(0, new Ext.menu.TextItem({
text: String.format(
'<img src="{0}" class="x-menu-item-icon x-cols-icon" />{1}',
Ext.BLANK_IMAGE_URL,
this._view.columnsText
),
style: 'line-height:16px;padding:3px 21px 3px 27px;'
}));
}

AlxH
5 Dec 2008, 10:11 AM
>Secondly, why do you completely disallow enableHdMenu:true? I think you should only >disallow enableColumnHide:true.

Again, it's by design. As stated above, there is only either/or: Use the default hdMenu, or use the plugin to use the original-hdmenu in the upper right of the grid.[/quote]

Hello MindPatterns,

I would like to have both menus, too! If theres technically and logically nothing to say against it, why would you want to prevent it?
It would be useful for example when you have other plugins like columnfilters in hd-menu of columns and this plugin for column-show/hide menu on the right.

ThorstenSuckow
5 Dec 2008, 10:19 AM
I would like to have both menus, too! If theres technically and logically nothing to say against it, why would you want to prevent it?
It would be useful for example when you have other plugins like columnfilters in hd-menu of columns and this plugin for column-show/hide menu on the right.

Your use case is completely different from mine, but that doesn't mean I want to prevent such an implementation.

However, I'm still busy with the build tools for conjoon (http://www.conjoon.org), so it could take a while until I come back to this ux.

Remy
9 Feb 2009, 3:57 AM
+1 for the simultaneous use of existing HdMenu alongside the excellent column menu ux. Not putting pressure on MP!

akannu
7 Apr 2009, 2:48 PM
It would be great if this plugin would basically accept a custom menu structure. We have grid features like the following:
(a) Filter bar- filter fields appear below column headers
(b) column view bar - allows user to quickly switch between groups of columns

we want to use this grid menu plugin so that it gives us the ability to anchor the icon, drop a menu etc...but the menus we want are Filter (on/off), Column view features such as New View, Delete view etc..that we will handle.

Is it possible to extend this plugin to display our own menu or does it only support column hide/show?

ThorstenSuckow
18 Apr 2009, 6:15 AM
0.2RC1 is available from the repository.

The plugin does now support GroupingViews. See the changelog on the first page for more information.

Matthias_WB
14 Jun 2009, 1:33 AM
Hello community,

because many developer forget binding the css-file, I have the style properties in the JS file placed.

In "init"-function near line 103 you add the red marked line.

init : function(grid)
{
if (grid.enableHdMenu === false) {
return;
}

styleExtention=Ext.util.CSS.createStyleSheet('.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {display:block}');
Then you don't bind the CSS file. When you open a grid with added plugin-property, you see a button with "Arrow down"-symbol.

http://img.xrmb2.net/images/741643.jpeg


When posibile, integrated my idea on the next version.



fangzhouxing
19 Jul 2009, 9:47 PM
I found a bug in IE7, when using hideHeaders config item in grid, the whole grid cannot show!
In FF 3.5, it is fine.

makana
29 Jul 2009, 1:48 AM
Hi Thorsten!
Thanks for sharing this great plugin! I like it!

I found out, that


this.colMenu.getEl()

is undefined until you open the menu. So there's an error in your destroy-method.

I simply changed it to


_destroy : function()
{
if(this.colMenu){
this.colMenu.removeAll();
Ext.menu.MenuMgr.unregister(this.colMenu);
if (this.colMenu.el) this.colMenu.el.remove();
delete this.colMenu;
}

if(this._menuBtn){
this._menuBtn.remove();
delete this._menuBtn;
}
}


The error occured when I closed a tab which contains a GridPanel with your plugin and I didn't open the menu at least once.
(But it's reproducable in a simple example. I modified the array-grid example and added your plugin. Then I called grid.destroy() on a button click. Just the same error.)

Maybe the problem occurs in your app as well and you can apply the little change to your code.

Keep up the great work!
Best regards

ThorstenSuckow
29 Jul 2009, 2:39 AM
I found out, that


this.colMenu.getEl()

is undefined until you open the menu. So there's an error in your destroy-method.


Hi Makana,

thanks for your error report. I'll fix this for the next release!

fangzhouxing
6 Aug 2009, 9:10 PM
Using 'Ext.util.CSS.createStyleSheet' will have problem in IE7.

see: http://extjs.com/forum/showthread.php?p=369735 (http://extjs.com/forum/showthread.php?p=369735)

tonedeaf
2 Oct 2009, 3:54 AM
I would like to have both menus, too! If theres technically and logically nothing to say against it, why would you want to prevent it?
It would be useful for example when you have other plugins like columnfilters in hd-menu of columns and this plugin for column-show/hide menu on the right.

+1 for keeping the existing enableHdMenu option and operating this plugin separately of the column dropdown menus.
I use the GridFilters extension and there doesn't look any way of using both at the moment.

futpol
3 Oct 2009, 10:08 PM
Hi Makana,

thanks for your error report. I'll fix this for the next release!

As I have the same problem I would appreciate a fix in svn, to prevent local change to be overwritten by clean download of plugin.

Thanks for great plugin!

ThorstenSuckow
5 Jan 2010, 3:31 PM
Hey there, I have just updated the plugin to work with Ext 3.1, along with some minor bug fixes.

warren72
13 Jan 2010, 9:40 PM
Is there a way to show the menu from a click of a button that is somewhere else on the page? It works as specified, but I have a need to be able to display it when a button is clicked. I can't seem to figure how to get the handle/reference to the menu object.

moegal
24 Jan 2010, 9:10 AM
Hi Thorsten!
Thanks for sharing this great plugin! I like it!

I found out, that


this.colMenu.getEl()

is undefined until you open the menu. So there's an error in your destroy-method.

I simply changed it to


_destroy : function()
{
if(this.colMenu){
this.colMenu.removeAll();
Ext.menu.MenuMgr.unregister(this.colMenu);
if (this.colMenu.el) this.colMenu.el.remove();
delete this.colMenu;
}

if(this._menuBtn){
this._menuBtn.remove();
delete this._menuBtn;
}
}


The error occured when I closed a tab which contains a GridPanel with your plugin and I didn't open the menu at least once.
(But it's reproducable in a simple example. I modified the array-grid example and added your plugin. Then I called grid.destroy() on a button click. Just the same error.)

Maybe the problem occurs in your app as well and you can apply the little change to your code.

Keep up the great work!
Best regards

I changed it the following to get it to work:



if(typeof(this.colMenu.getEl())!="undefined"){
if (this.colMenu.getEl()) this.colMenu.getEl().remove();
}
//this.colMenu.getEl().remove();


Thanks, Marty

mystix
24 Jan 2010, 9:44 AM
I changed it the following to get it to work:



if(typeof(this.colMenu.getEl())!="undefined"){
if (this.colMenu.getEl()) this.colMenu.getEl().remove();
}
//this.colMenu.getEl().remove();


Thanks, Marty

i believe it should be sufficient to simply change that to


_destroy : function() {
if (this.colMenu) {
this.colMenu.removeAll();
Ext.menu.MenuMgr.unregister(this.colMenu);
Ext.destroy(this.colMenu); // this.colMenu.el.remove();
delete this.colMenu;
}

if (this._menuBtn) {
Ext.destroy(this._menuBtn); // this._menuBtn.remove();
delete this._menuBtn;
}
}

moegal
24 Jan 2010, 10:08 AM
mystix,

thanks but then I get another error after i use the menu and then close it

me.dom has no properties

Thanks, Marty

moegal
24 Jan 2010, 5:33 PM
mystix,

I spoke too soon. I am not getting the error now but I cannot reopen the menu after it has been closed.

For example I have a tab with a grid. I open the tab, display the grid and open the gridviewmenu. I close the tab. I reopen the tab and I cannot access the gidviewmenu. on this or any other gid in any tab.

Thanks,

Marty

mystix
25 Jan 2010, 7:35 AM
@moegal: sounds like you're attempting to reuse a single instance of this plugin with multiple grids. got a link to a test page somewhere where i can take a look?

moegal
25 Jan 2010, 7:56 AM
That may be it. I am giving each grid a unique name and id though:



var grid1 = new Ext.grid.GridPanel({
id: 'grid1panel',
store: gridstore1,
plugins:[
new Ext.ux.grid.GridViewMenuPlugin()
],
enableHdMenu: true,
...

AND


var grid2 = new Ext.grid.GridPanel({
id: 'grid2panel',
store: gridstore2,
plugins:[
new Ext.ux.grid.GridViewMenuPlugin()
],
enableHdMenu: true,
...


Am I doing this wrong? Should I be assigning each plug-in to a var 1st?

Thanks, Marty

mystix
25 Jan 2010, 10:09 AM
you're doing the right thing -- i.e. creating a new plugin instance for each unique grid.

can't tell what's wrong from the code you posted though.

moegal
25 Jan 2010, 10:24 AM
let me check the version, must be something to do with that.

thanks, Marty

WixSL
4 Aug 2010, 6:24 AM
The plugin stop working with Ext 3.3.0 beta.
Clicking a menu item result in the following error:


this.config[col] is undefined (on GridView.getDataIndex)

This is because GridView.hdCtxIndex doesn't get set.
Probably because GridView._handleHdDown gets fired before GridView.handleHdDown.

WixSL
15 Aug 2010, 10:02 AM
I've fixed this by initializing the hdCtxIndex attribute.



init : function(grid){
if(grid.enableHdMenu === true){
throw("Ext.ux.grid.GridViewMenuPlugin - grid\"s \"enableHdMenu\" property has to be set to \"false\"");
}
this._view = grid.getView();
this._view.initElements = this._view.initElements.createSequence(this.initElements,this);
this._view.initData = this._view.initData.createSequence(this.initData,this);
this._view.destroy = this._view.destroy.createInterceptor(this._destroy,this);
this._view.hdCtxIndex = 0;
this.colMenu = new Ext.menu.Menu();
this.colMenu.on("beforeshow", this._beforeColMenuShow, this);
this.colMenu.on("itemclick", this._handleHdMenuClick, this);
}

Matthias_WB
10 Nov 2010, 3:28 AM
The fix working fine under ExtJS3.30..
Thank you very much!

Beginner1971
11 May 2012, 9:15 AM
Where can I find the current version of this plugin? The link to the homepage is broken and the version at Google Code is out of date.