Page 2 of 10 FirstFirst 1234 ... LastLast
Results 11 to 20 of 99

Thread: LockingGridPanel - Grid with fixed and scrolling columns

  1. #11
    Sencha User
    Join Date
    Aug 2009
    Posts
    18

    Default

    Nice shooting. We clipped in a 'hack' to the old version to get it to work in 3.x, but column headings were not scrolling or aligning properly.

    This version seems to be working as advertised (so far ;-)

  2. #12
    Sencha User
    Join Date
    Aug 2009
    Posts
    18

    Default locking grid - safari

    hello,

    i'm not sure how high on the radar safari is for you, but here it is..

    it seems like there is a bug (perhaps with safari itself?) that causes the grid to repaint incorrectly when the window it resides in is resized.

    if it is resized smaller, the scrollbar along the bottom and to the right extend the entire width and height of the viewport. the scrolling columns actually work correctly, but when at the far right of the grid, the locked columns scroll just a bit. ditto for the rows ~ at the bottom, the headers scroll off the top a bit.

    when it is resized just a little larger, the scrollbars are repositioned correctly.

    it does not seem to be a matter of what the size of the viewport actually is. if the window is resized very small (scrollbars painted entire width and height of the window), then resized a bit larger, the scrollbars are then painted correctly.

    i have attached screen snaps of a viewport with incorrect scrollbars and then slightly resized larger with the scrollbars correct.

    not sure if any of this makes sense or is even relevant, but i thought i would bring it up.

    heck, it could just be how *we* are using the grid.
    Attached Images Attached Images

  3. #13
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Quote Originally Posted by vinepod View Post
    heck, it could just be how *we* are using the grid.
    Can you post the config you use to embed the grid in the tabpanel?

  4. #14
    Sencha User
    Join Date
    Aug 2009
    Posts
    18

    Default locking grid - safari - code fragment

    i hope this is enough code..

    Code:
    // --------------------------------------------------------------------
    function createBondsListGrid()
    {
        pnlBondsListGrid = new Ext.ux.grid.LockingGridPanel(
        {
            // These are required to get the west panel (border layout) working correctly
            // autoExpandColumn : 'securityname',   // pick a column to fill the gap
    
            id              : 'BondsTab',
            title           : 'Bonds',
    
            // ---------------------------------------------------------
            enableHdMenu    : false,
            onContextMenu   : Ext.emptyFn,
            enableColumnHide: false,        //disable column hide/show option from menu
    
    
            stripeRows      : true,
            store           : createBondsListStore(),
            loadMask        : true,
            height          : 700,
            columns         :
            [
                { header: '#', width: 23, sortable: false, fixed: true, locked: true,   dataIndex: '', id: 'numberer',
                  renderer : function(value, meta, record, rowIndex, colIndex, store)
                  {
                      var num = 0;
                      store.each( function(r)
                      {
                          if(r._groupId == record._groupId)
                          {
                              num++;
                          }
                          return record != r;
                      });
    
                      return num;
                  }},
    
                { header : "<BR>Security",  css:'font-weight:bold;color:#336699;!important;', sortable : true,
                  width: 175, dataIndex :"securityname",id : 'securityname', locked: true,},
                { header : "<BR>Type",      width : 70, dataIndex : "type", sortable : true,  align : 'center', },
                { header : "<BR>Principal", width : 100, dataIndex : "principal",      sortable : true,  align : 'right', renderer:Ext.util.Format.NumberFactory(0,true,true),},
                { header : "<BR>Maturity",  width : 80, dataIndex : "maturity",       sortable : true,  align : 'right', renderer:Ext.util.Format.dateRenderer('Y-M-d'), },
                { header : "Avg.<BR>Life", width : 50, dataIndex : "averagelife",    sortable : true,  align : 'right', renderer:Ext.util.Format.NumberFactory(2,false,false), },
                { header : "<BR>Factor",      width : 70, dataIndex:  "factor",sortable : true, align : 'right', renderer: Ext.util.Format.NumberFactory( 6, false, false ), },
    
                { header : 'Mtm<br>', width : 80, dataIndex : "price0", align : 'right', renderer: RenderMtmChange, },
                { header : 'Mtm<br>', width : 80, dataIndex : "price1", align : 'right', renderer: RenderMtmChange, },
    
                { header : "Mtm<br> Impact",  id: 'mtmimpact', css:'font-weight:bold;',
                  width : 90, align : 'right', dataIndex : "mtmchange", sortable : true,renderer:Ext.util.Format.NumberFactory(0,true,true) },
    
                { header : 'Accruals<br>',
                  width : 90, align : 'right', dataIndex : "ai_prev_month",renderer:Ext.util.Format.NumberFactory(0,true,true)               },
                { header : 'Accruals<br>',
                  width : 90, align : 'right', dataIndex : "ai_curr_month",renderer:Ext.util.Format.NumberFactory(0,true,true)               },
    
                { header : 'Receivables<br>',
                  width : 90, align : 'right', dataIndex : "rcv_prev_month",renderer:Ext.util.Format.NumberFactory(0,true,true)              },
    
                { header : 'Receivables<br>',
                  width : 90, align : 'right', dataIndex : "rcv_curr_month",renderer:Ext.util.Format.NumberFactory(0,true,true)              },
    
                { header : "Cash<BR>Received",  id: 'cashreceived',  css:'font-weight:bold;',
                  width : 90, align : 'right', dataIndex : "cash_received", renderer:Ext.util.Format.NumberFactory(0,true,true)  },
                { header : "Interest<BR>Income", id : 'interest',
                  width : 90, align : 'right', dataIndex : "net_cash",      renderer:Ext.util.Format.NumberFactory(0,true,true)                },
    
                { header : "<BR>P&L", id:'pnlamount',  css:'font-weight:bold;',
                  width : 90, align : 'right', dataIndex : "total_pnl", renderer:Ext.util.Format.NumberFactory(0,true,true) },
                { header : "NAV<br>Impact(bp)", width : 60, align : 'right', dataIndex : "nav_impact", sortable:true, renderer:Ext.util.Format.NumberFactory(1,true,false)  },
            ],
    
    
            listeners :
            {
                activate : function()
                {
                    setToolbarState();
                }
            },
    
        });
    
    function createBondsListStore()
    {
        pnlBondsListStore = new Ext.data.Store(
        {
            autoLoad        : false,
            sortInfo        : { field : "securityname", direction : "ASC" },
    
            proxy   : new Ext.data.HttpProxy(
                {
                    url     : "/xxxxxxxx.php",
                    method  : "POST",
                }),
    
            reader  : new Ext.data.JsonReader(
                {
                    root    : "pnlbondlist",
                },
                [
                    { name : 'rownum' }, // have to add this in or the export to csv doesn't work correctly - securityname is just the row numbers
                    { name : "securityname",   mapping : "securityname"                },
                    { name : "type",           mapping : "type"                        },
                    { name : "maturity",       mapping : "maturity",      type:'date'  },
                    { name : "currency",       mapping : "currency"                    },
                    { name : "price0",         mapping : "price0",        type:'float' },
                    { name : "price1",         mapping : "price1",        type:'float' },
                    { name : "factor",         mapping : "factor",        type:'float' },
                    { name : "fx_rate",        mapping : "fx_rate",       type:'float' },
                    { name : "principal",      mapping : "faceamount1",   type:'float' },
                    { name : "averagelife",    mapping : "averagelife",   type:'float' },
                    { name : "mtmchange",      mapping : "mtmchange",     type:'float' },
                    { name : "ai_prev_month",  mapping : "ai_prev_month", type:'float' },
                    { name : "ai_curr_month",  mapping : "ai_curr_month", type:'float' },
                    { name : "rcv_prev_month", mapping : "rcv_prev_month",type:'float' },
                    { name : "rcv_curr_month", mapping : "rcv_curr_month",type:'float' },
                    { name : "cash_received",  mapping : "cash_received", type:'float' },
                    { name : "net_cash",       mapping : "net_cash",      type:'float' },
                    { name : "total_pnl",      mapping : "total_pnl",     type:'float' },
                    { name : "nav_impact",     mapping : "nav_impact",    type:'float' },
                ]),
    
    
        });
    
        return pnlBondsListStore;
    }

  5. #15
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    And you are using the result of createBondsListGrid directly as a TabPanel item?

  6. #16
    Sencha User
    Join Date
    Aug 2009
    Posts
    18

    Default

    in a word: yes. Here's the code where i create the tab panel:

    Code:
    function createDashBoardPanel()
    {
        pnlDashBoardTabPanel = new Ext.TabPanel(
        {           
            autoTabs      : true, 
            activeTab     : 0,
            defferedRender: false, 
            border        : false,
            autoScroll    : true,
    
            items         :
            [
                createSummaryGrid(),
                createBondsListGrid(),
                createPaymentPanel(),
                createFxExposurePanel(),
                createSwapsPanel(),
                createParameterPanel(),
                createMissingPricesPanel(),
                createAdminPanel(),
            ],
        });
    
        return pnlDashBoardTabPanel;
    }

  7. #17
    Sencha User
    Join Date
    Jun 2008
    Posts
    138

    Default

    Quote Originally Posted by [email protected] View Post
    performance
    Under the ExtJS roadmap, http://www.extjs.com/products/extjs/roadmap.php, Grid View with Column Locking will be available in 3.1. Will it look and behave similar to this extension? Will performance still be an issue?

  8. #18
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Ext 3.1 will contain a column locking example (it will not be part of the main library), but I don't know if it will be similar to this extension.

    ps. Tomorrow I'm going to post update 7 that should fix the bugs found so far.

  9. #19

    Default Expander

    How would I go about customizing this solution to work with the RowExpander plugin?

  10. #20
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Quote Originally Posted by hankin View Post
    How would I go about customizing this solution to work with the RowExpander plugin?
    That would be rather difficult. You would have to:
    - Split the expander in a locked and unlocked part.
    - Sync row heights in the locked vs. unlocked sections.

Page 2 of 10 FirstFirst 1234 ... 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
  •