Hybrid View

  1. #1
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default Ext.ux.grid.GridViewMenuPlugin

    Ext.ux.grid.GridViewMenuPlugin


    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
    Code:
    .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:
    Attached Images

  2. #2
    Ext User
    Join Date
    May 2007
    Posts
    181
    Vote Rating
    1
    akannu is on a distinguished road

      0  

    Default Great!

    Great!


    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.

  3. #3
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by akannu View Post
    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.

  4. #4
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    How can I use this plugin? Is awesome!
    Code:
    /*
     * 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();
    });

  5. #5
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Hi garraS,

    use this code for your grid:

    Code:
        // 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

  6. #6
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    Ok, but returns me this error:
    Code:
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi