Ext.ux.grid.GridViewMenuPlugin

[ThorstenSuckow]

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...iewmenuplugin/

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

Have fun!

Regards

Thorsten



Image shows the plugin in use with a regular view



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]

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]

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]

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]

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]

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]

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]

Now it's work!

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

Thanks!

[ThorstenSuckow]

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]

Thank you so much!