Hybrid View

  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Location
    Norway
    Posts
    73
    Vote Rating
    0
    neshaug is on a distinguished road

      0  

    Lightbulb Ext.ux.plugins.GroupHeaderGrid (v1.3)

    Ext.ux.plugins.GroupHeaderGrid (v1.3)


    This plugin is based on the code from the thread below.
    Old thread: http://extjs.com/forum/showthread.php?t=12677

    This plugin implements support for grouping columns (see picture).

    As the last update states, Condors contribution is now the main plugin and is the attached download.

    Example code is contained in the downloads.

    History:
    • 07.01.08: Added support for infinite rows of grouped headers. This isn't tested much yet. Next on the list is making rowspan.
    • 08.01.08: Added support for grouped header spanning of rows. Please read further down for more information on this.
    • 14.01.08: Made the extension into a plugin (Thanks JorisA for the idea of making the ux a plugin!). I've tested the plugin for both GridView and GroupedView.
    • 18.01.08: The columns got out of alignment with the headers in IE 6/7. This was fixed by alanquerioz!!
    • 19.01.08: Updated the renderGroupedHeaders method.
    • 22.02.08: Multiple updates
      - vhaskilic made it possible to hide columns! You can download this code on attached files.
      - rogerr made the plugin support the reconfigure method in the grid again.
      - KRavEN got the border in no-colspan-cell's to appear by adding &nbsp to the empty header!
    • 08.04.08: ApocalypseCow added a version that is using a new data structure for the grouped headers. If you used the old version of the grouped headers in your app you have to change the grouped headers definition.
      - Supports toggling hide / show
      - Few extras included, like changing the position of columns within its own group.
      - Supports IE 6.0, IE 7.0 and FF.
      Read about it and download here!
    • 12.04.08: Condor added a new version that is using the existing underlying data structure for the grouped headers. His code is also neat and tidy, and the "hackish" feel is long gone when I look at it This code is the new main code for this plugin, and I recommend that you continue your work on this version if you want to add new features.
      Read Condors initial post about his work here, and about his row span work around here.
      - Supports toggling hide / show
      - Supports IE 6.0 (with a small workaround), IE 7.0 and FF.
    • 13.11.08: GroupHeaderPlugin version 1.1 released.
      - Columns contain group headers in column menu (optionally hierarchical).
      - Group header events (headermousedown, headerclick, headerdblclick, headercontextmenu).
      - Group header sorting and menu.
      (based on GroupHeaderPlugin-widthfix)
    • 14.11.08: GroupHeaderPlugin version 1.2 released.
      - Drag & drop reorder of both columns and groups is now supported (but only within the same row!).
      - Config options can now be specified in the plugin constructor as well as in the column model.
    • 29.01.09: GroupHeaderPlugin version 1.3 released.
      - Hierarchical menu now also allows showing/hiding groups.
    • 01.08.09: The Ext 3.0.0 version of this plugin can be found here.
    Attached Images
    Attached Files
    Last edited by Condor; 1 Aug 2009 at 7:00 AM. Reason: Link to Ext 3.0 version

  2. #2
    Ext User
    Join Date
    Nov 2007
    Posts
    114
    Vote Rating
    0
    orangehairedboy is on a distinguished road

      0  

    Default


    I'm not enough of a genius to be able to do this myself, but could this be applied to an Editor Grid? If so, this would be IDEAL for me!

  3. #3
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Location
    Norway
    Posts
    73
    Vote Rating
    0
    neshaug is on a distinguished road

      0  

    Default


    Yes.. Just use this view on it.. EditorGridPanel has a view config option just like the other GridPanels. Haven't tested it though..

  4. #4
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Location
    Norway
    Posts
    73
    Vote Rating
    0
    neshaug is on a distinguished road

      0  

    Default


    Made support for the grouped headers to have rowspan. Some issues with it still so I won't release the code just yet.

  5. #5
    Ext User
    Join Date
    Nov 2007
    Posts
    114
    Vote Rating
    0
    orangehairedboy is on a distinguished road

      0  

    Default


    I honestly don't know what that means. Can you provide an example? I'm sure it's something simple and I just don't understand how it works on that level.

  6. #6
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Location
    Norway
    Posts
    73
    Vote Rating
    0
    neshaug is on a distinguished road

      0  

    Default


    Well, if you check the config code for my GridPanel:

    x = new Ext.grid.GridPanel({
    cm: cmtest,
    height:100,
    view: new Ext.ux.GroupHeaderGridView({autoFill:true}),
    autoExpandColumn:"first",
    region:"north",
    title:'Array Grid'
    });

    Here you see that I use my GroupHeaderGridView in the view config option of
    the gridpanel. EditorGridPanel has this view config option as well. Just
    download the GroupHeaderGridView javascript file. Include it in your include
    order of javascripts and use a column model as stated in the first post and
    use the ux on your view.

    view: new Ext.ux.GroupHeaderGridView({autoFill:true})

  7. #7
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Location
    Norway
    Posts
    73
    Vote Rating
    0
    neshaug is on a distinguished road

      0  

    Default


    If anyone is looking at this.. I think the correct way will be extending ColumnModel and extending GridView.. Hmm

  8. #8
    Ext User
    Join Date
    Nov 2007
    Posts
    114
    Vote Rating
    0
    orangehairedboy is on a distinguished road

      0  

    Default


    Ah!!! I understand now. Thanks!!!

  9. #9
    Ext User
    Join Date
    Jan 2008
    Posts
    33
    Vote Rating
    0
    rogerr is on a distinguished road

      0  

    Default Proposed fixes for GroupHeaderGrid plugin

    Proposed fixes for GroupHeaderGrid plugin


    I'm using the plugin, and it works great, but I ran into a problem when the grid is reconfigured such that the number of columns changes. In the current version, the plugin stores the grid's original view and column model on itself, and then uses these in the various render methods. However, when grid.reconfigure is called, new column model and views are set.

    So, the changes I made were to remove the storing of this.cm and this.view, and instead wherever these were referenced set local variables from the current value of this.grid.getColumnModel() and this.grid.getView(). And that seems to do the trick.

    Also, note that the renderHeaders seems never to be called with a cm arg, so I removed it and again just use this.grid.getColumnModel() in there.

    The updated version of GroupHeaderPlugin.js is attached for your consideration.

    Thanks for sharing your work.
    Attached Files

  10. #10
    Ext User
    Join Date
    Jan 2008
    Posts
    4
    Vote Rating
    0
    vhaskilic is on a distinguished road

      0  

    Default Enable Column Hide/Show

    Enable Column Hide/Show


    Thanks for your great code, that was really what I was looking for One of the things I needed and missing in your GoupHeader plugin was column hide/show feature. I changed your code a little bit to enable column hide/show. Attached is the modified GroupHeaderPlugin.js to enable that feature.

    Usage is exactly same but now there is no need to put enableHdMenu: false...
    Attached Files