Page 1 of 4 123 ... LastLast
Results 1 to 10 of 37

Thread: TableGridView lightweight GridView based upon a <table>

  1. #1
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default TableGridView lightweight GridView based upon a <table>

    99.9% of the time when you display a GridPanel, you want the columns autosizing.

    The current GridView implementation is massively complex, and based on separate table elements, and so keeping the column widths aligned is a huge overhead, and measuring column widths in one pass in order to then go through and set all column widths is bordering on insane!

    IMHO, this is a bad implementation, and the entire Grid's body should just be one <table>

    This is faster to render, and automatically sizes column widths. All you have to do is then equalize the column widths between the header cells and row zero of the body table. A simple, one step operation.

    The attached file unzips into examples/<any directory>

    It displays the array-grid example data using an Ext.ux.TableGridView. I've tested it on FF 3.5, IE 8 and Chrome 3.0.*

    This View does not handle any "extras". No column moving or resizing or sorting or hiding.

    The eventual idea is that this becomes an Ext.BoxComponent in its own right, not just a slave of a Panel class. Then it could have plugins added for those extra capabilities.

    table-grid.zip

  2. #2
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    11
      0  

    Default

    I've always wonder why such a complex structure if a grid is basically a table. Great job Hope to find it on next Ext version.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    It's just quick fix because we have a system with a legacy backend which is not a database, does not support paging, and returns a large grid. The performance with the standard GridView was not quick enough so I cobbled this together.

    I think a fully functioning GridView with expansion row, moveable, resizable columns could be created from it.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    Latest update supports column resizing.

    It uses a nice utility class, the Ext.ux.EventZone which creates a mouse event source on an area of an element.

    So for instance in the rightmost 5 pixels of a header cell. This then fires mouseenter, mouseleave, mousedown, mousemove, mouseup and click. But only from within its defined subarea of its element.

    This is also used to resize the now framed GridPanel. A Ext.ux.EventZone is created based on the lower right 7 pixel square of the GridPanel's outer Element.

    No extra resize handle elements needed.

    This technique could be usefully used resizing images and input fields where you cannot insert handle elements, and the Ext.Resizable class has to wrap your original with an extra DIV into which it inserts handles.

    With this utility class, handles are just zones of the resizable element.

    (Note that column resizing does not work in Chrome, and I can't work out why. It works in IE (in standards mode) and FF fine)

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    17
    Vote Rating
    0
      0  

    Default

    Very nicely done!! I seem to hit a small bug.
    When I turn frame: false the stripedRows: true doesn't work. I turn frame: true and it works fine. I even tried doing .x-grid3-row-alt to my own background color and no change.

    Code:
    Ext.onReady(function(){
    
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
        var myData = [
            ['1','this is a test of the broadcating system.'],
            ['2','this is a test of the broadcating system.'],
            ['3','this is a test of the broadcating system.'],
            ['4','this is a test of the broadcating system.']        
        ];
    
        // 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: 'number'},
               {name: 'question'}
            ]
        });
        store.loadData(myData);
    
        // create the Grid
        window.grid = new Ext.grid.GridPanel({
            frame: false,
            stateful: false,
            view: new Ext.ux.TableGridView({
                emptyText: 'Tough! No data!'
            }),
            store: store,
            columns: [
                {id:'number',header: "#", width: 16, sortable: true, dataIndex: 'number'},
                {header: "Question", width: 180, sortable: true, dataIndex: 'question'}
            ],
            stripeRows: true,
            width:243
        });
    
        grid.render('grid-example');
    
        //grid.getSelectionModel().selectFirstRow();
    });

  6. #6
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    I always wondered why the GridPanel was so complex. Why are rows actually sepeperate tables? Can't the very same functioning grid be created with a single table? Are there any plans to completely re-engineer the GridPanel in a future release to use a single table, but provide same functionality?

  7. #7
    Ext User
    Join Date
    Apr 2008
    Location
    Santa Clara, CA
    Posts
    28
    Vote Rating
    0
      0  

    Thumbs up

    Great job, Animal. We really need something like this.

    Found one minor problem, on Chrome 2.0 header and body columns are initially aligned properly. However, where I start resizing them a few time, they start loosing their alignment.

    Rakesh

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    I'll ask again since my reply has been ignored thus far.

    Is there any reason why the GridPanel has to use individual tables for each row? This REALLY hurts performance. We need a grid that can easily handle thousands of items, and the GridPanel, as nice and fully functional as it is, falls flat on its face with many rows.

    Is there any chance at streamlining the GridPanel to use a single table and rows? Yahoo! does it... Do we give up any functionality by going to this single table model??

  9. #9
    Ext User tonedeaf's Avatar
    Join Date
    Dec 2007
    Posts
    137
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by dbassett74 View Post
    I'll ask again since my reply has been ignored thus far.

    Is there any reason why the GridPanel has to use individual tables for each row? This REALLY hurts performance. We need a grid that can easily handle thousands of items, and the GridPanel, as nice and fully functional as it is, falls flat on its face with many rows.

    Is there any chance at streamlining the GridPanel to use a single table and rows? Yahoo! does it... Do we give up any functionality by going to this single table model??
    I think individual rows are in their own tables to support grouping. A grouping row with a single column can nest the related rows and expand collapse them easily. Other UI libraries (Activewidgets) don't support grouping by default and its very difficult to create grouped rows probably due to their single table design.

  10. #10
    Ext User
    Join Date
    Jan 2009
    Posts
    543
    Vote Rating
    0
      0  

    Default

    Ah, okay, its the grouping that requires the use of tables for each row. I still think that with some ingenuity, we could still come up with a better model. Like maybe when not grouping, it uses a single table model. When grouping, it switches to a model that can better support grouping, even if overall performance suffers a bit. I think it is reasonable to expect an impact on performance when grouping, but when not grouping, why should we still have to suffer the performance impact of individual tables for each row?

Page 1 of 4 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •