Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default [2.0] grid with locking column [NEW: Update 5]

    [2.0] grid with locking column [NEW: Update 5]


    The one big missing feature from extjs1.x not available in extjs2 is locked columns for the grid. As we needed the locked column feature for our customers, I made an initial port to extjs2.

    Instead of using Ext.grid.GridPanel you should use Ext.grid.LockingGridPanel or for an editorgrid Ext.grid.LockingEditorGridPanel.

    To use it with the checkboxSelectionModel:
    PHP Code:
    var sm = new Ext.grid.CheckboxSelectionModel();
    sm.locked true
    [Update 1]
    • Fixed scrollsync error
    • Row highlighting

    [Update 2]
    • Allow to define a LockingContentModel at config time, instead of the columns array
    • Minor rendering issue

    [Update 3]
    • Finally fixed the resizing of locked columns
    • Highlighting / selecting rows from the locked column now works correctly

    [Update 4]
    • Fixed issue with locked autoExpand column in FF
    • Incorporated various fixes in this thread, Thanks to cblin, huixjan, lesul and rmesser
    • Included example files

    [Update 5] - Only for Ext 2.2/2.2.1!
    • Fix: onAllColumnWidthsUpdated and onColumnWidthUpdated were called with the wrong column number for non-fixed columns.
    • Fix: Row rendering needed to be moved from renderUI to afterRender (for Ext 2.2 compatibility).
    • Fix: Row headers got out of sync when changing the column width in quirks mode.
    • Fix: Clicking in a fixed column of an added or updated record threw a javascript error.
    • Fix: The editor for fixed cells was positioned wrong (which made it invisible).
    • Change: The locked grid height didn't always compensate correctly for the horizontal scrollbar. This can't be fixed, so it now always is full height (but scrolling to the last record does work).

    The Ext 3.0 version of this extension can be found here.
    Attached Files
    Last edited by Condor; 27 Oct 2009 at 12:46 AM. Reason: Ext 3.0 version link

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Nice first attempt! In my non-exhaustive testing, I noticed a few issues (FF 2.0 / Mac):
    • The row highlight on mouseover doesn't work on locked cols and clicking in the locked area raises the error "row has no properties"
    • Cannot resize locked cols (you can in 1.1)
    • When I scroll I get "Ext.grid.GridView.superclass.syncScroll has no properties
      file:/Applications/xampp/xamppfiles/htdocs/ext/sandbox/ux/LockingGridView/columnLock.js
      Line 110" -- maybe a config issue on my end somehow?

    Like I said though, nice job. Many people will be very happy to get a stable UX for this in place for 2.0. BTW, I'm using one of the sample grids and just swapped out GridPanel for LockingGridPanel. Let me know if any other configuration is required.

    Code:
    <html>
    <head>
        <title>2.0 Mac Test Page - Ext Base</title>
        <link rel="stylesheet" type="text/css" href="../../../ext-2.0/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="columnLock.css">
        <script type="text/javascript" src="../../../ext-2.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../../ext-2.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="columnLock.js"></script>
        
    	<script type="text/javascript">
        Ext.onReady(function(){
            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);
    
            // create the Grid
            var grid = new Ext.grid.LockingGridPanel({
                store: store,
                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'
            });
    
            grid.render('grid-example');
    
            grid.getSelectionModel().selectFirstRow();
        });
    	</script>
    </head>
    <body style="margin:20px;">
        <div id="grid-example"></div>
    </body>
    </html>

  3. #3
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    Nice first attempt! In my non-exhaustive testing, I noticed a few issues (FF 2.0 / Mac):
    • The row highlight on mouseover doesn't work on locked cols and clicking in the locked area raises the error "row has no properties"
    • Cannot resize locked cols (you can in 1.1)
    • When I scroll I get "Ext.grid.GridView.superclass.syncScroll has no properties
      file:/Applications/xampp/xamppfiles/htdocs/ext/sandbox/ux/LockingGridView/columnLock.js
      Line 110" -- maybe a config issue on my end somehow?

    Like I said though, nice job. Many people will be very happy to get a stable UX for this in place for 2.0. BTW, I'm using one of the sample grids and just swapped out GridPanel for LockingGridPanel. Let me know if any other configuration is required.
    Thanks for testing, I fixed the syncScroll and highlight issues. No other configuration is required. My test-case is alsmost identical (except that my case has the 'company' and 'price' columns locked by default)

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    WOW! Works very good by now.Thanks for sharing

    One issue i recognized in IE6

    When locking one column, changing the the width of its header (yes, it works, even its some kind of "finetuning" to reach the little splitbar ) and locking another column, the headers do not fit to the rows anymore. It works fine in FF and IE7.

    See attached screenshot from IE6

    As no doctype is given in the above example, this time its not the usual "dont use a doctype to get it working in IE6" issue.

    Edit:
    Sorry, my mistake...the "Company" column was scrolled so it only looks like a bug...everything is fine and you are my hero!

    And brian is right: you cannot size the columns, if more than 1 are locked

    Another "issue" (don't owkr, if this was possible in 1.1): I cant move/change position of locked columns, like i can with unlocked ones. But i can move an unlocked columns to the locked area. But not vice versa.
    Attached Images

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

      0  

    Default


    Good job! Are there any functions which can set default columns locked?
    I find a bug while i'm using "new Ext.grid.ColumnModel()".
    It's fine if I use just the array format.

  6. #6
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default


    Quote Originally Posted by timezz View Post
    Good job! Are there any functions which can set default columns locked?
    I find a bug while i'm using "new Ext.grid.ColumnModel()".
    It's fine if I use just the array format.
    Thanks. THe LockingGridPanel uses a LockingColumnModel(). I updated the code to allow you to define your own column model, instead of the columns array.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    17
    Vote Rating
    0
    seno is on a distinguished road

      0  

    Default


    cool job!
    i find two bugs:
    1. while clicking in the locked area raises the error "row has no properties".
    2. if there are more one locked columns, only last column can resize.

  8. #8
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default


    Quote Originally Posted by seno View Post
    cool job!
    i find two bugs:
    1. while clicking in the locked area raises the error "row has no properties".
    2. if there are more one locked columns, only last column can resize.
    Thanks. Both bugs are fixed now.

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    6
    Vote Rating
    0
    jfkelley is on a distinguished road

      0  

    Question Sample of fixed column horizontal scrolling?

    Sample of fixed column horizontal scrolling?


    Forgive the newbie question, but I downloaded the zip and found no html sample. I copied the sample html above, carefully updated the script/link hrefs to my ext-2.0-rc1 download (and verified the existence of each file), but I see no horizontal scroll bar.

    I'd very much like to get a demo working that resembles your screenshot!!

  10. #10
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    timezz is on a distinguished road

      0  

    Default


    Quote Originally Posted by MeDavid View Post
    Thanks. Both bugs are fixed now.
    Great! But still, it's gonna be much better if we can set some columns locked in the code rather than on the page.
    And another suggestion: could the "new Ext.grid.RowNumberer()" also be locked? Coz I can't lock the row numbers and it just moves after the locked columns.

    Cheers,
    Matt

Thread Participants: 138

  1. galdaka (2 Posts)
  2. Condor (47 Posts)
  3. mapo (1 Post)
  4. seno (1 Post)
  5. rmesser (2 Posts)
  6. mystix (5 Posts)
  7. fangzhouxing (1 Post)
  8. rarerules (6 Posts)
  9. Kalum78 (2 Posts)
  10. Fabyo (2 Posts)
  11. akannu (4 Posts)
  12. badgerd (1 Post)
  13. hanganum (1 Post)
  14. jlhs5 (3 Posts)
  15. zaunaf (1 Post)
  16. mjlecomte (1 Post)
  17. border9 (3 Posts)
  18. matt.hall (1 Post)
  19. justinfalk (1 Post)
  20. Air_Mike (1 Post)
  21. mbalusu (1 Post)
  22. wm003 (2 Posts)
  23. Plater (1 Post)
  24. ssmso (3 Posts)
  25. jitu (1 Post)
  26. durlabh (2 Posts)
  27. crpatrick (2 Posts)
  28. timezz (2 Posts)
  29. jfkelley (2 Posts)
  30. mankz (6 Posts)
  31. xbohdpukc (1 Post)
  32. orangehairedboy (1 Post)
  33. mbahl (2 Posts)
  34. cblin (3 Posts)
  35. vertigoMX (1 Post)
  36. bernd01 (1 Post)
  37. sanjshah (1 Post)
  38. tahlon (1 Post)
  39. nanich (3 Posts)
  40. tonedeaf (1 Post)
  41. gaspard (1 Post)
  42. ghutchens (3 Posts)
  43. wsn24x7 (1 Post)
  44. srikan999 (1 Post)
  45. lesul (2 Posts)
  46. NotChris (3 Posts)
  47. NeonMonk (3 Posts)
  48. surgi (3 Posts)
  49. lickui (2 Posts)
  50. sureshraja.crt (1 Post)
  51. herrjj (1 Post)
  52. minty (2 Posts)
  53. huixjan (2 Posts)
  54. archrajan (1 Post)
  55. milou (1 Post)
  56. bishoco (1 Post)
  57. deltron0 (1 Post)
  58. ravindra.tiwary1 (2 Posts)
  59. slava_k (1 Post)
  60. cjqcjq2008 (1 Post)
  61. srikanthnukala (1 Post)
  62. Kevin.Tan (3 Posts)
  63. xavierg (1 Post)
  64. ygl (1 Post)
  65. varsha.kothari (3 Posts)
  66. tinnt (6 Posts)
  67. sdileep (1 Post)
  68. rule3 (3 Posts)
  69. RobinOuyang (1 Post)
  70. lokiofragnar (1 Post)
  71. imran (1 Post)
  72. sachin_248 (1 Post)
  73. mogen9999 (2 Posts)
  74. faraway (1 Post)
  75. sircyaj (1 Post)
  76. tmaung (1 Post)
  77. wwwtd (1 Post)
  78. jamiro (1 Post)
  79. Frankatron (3 Posts)
  80. peacock (1 Post)
  81. NicoP (2 Posts)
  82. Raz_ (3 Posts)
  83. jchau (6 Posts)
  84. sanjaykanteti (1 Post)
  85. JSRobbie (1 Post)
  86. alvin (1 Post)
  87. Shmitt (1 Post)
  88. Nagiy (4 Posts)
  89. cooluser7 (1 Post)
  90. Angelina (1 Post)
  91. greeeg (2 Posts)
  92. hoanganhinfo (1 Post)
  93. duverma (1 Post)
  94. hawks2001 (1 Post)
  95. LoekieBoy (3 Posts)
  96. Bogdan Juszczak (1 Post)
  97. eversound (1 Post)
  98. priyanka_iknip (1 Post)
  99. xiespirit (1 Post)
  100. mmboy (1 Post)
  101. SMIRZA (1 Post)
  102. fmanrique (2 Posts)
  103. redzedi (1 Post)
  104. sham123456 (1 Post)
  105. digiprosoft (2 Posts)
  106. krmlmnstr (1 Post)
  107. abotero (1 Post)
  108. tomlobato (2 Posts)
  109. sramanna (2 Posts)
  110. kastanis (5 Posts)
  111. pingTeam (1 Post)
  112. cmschick (2 Posts)
  113. liulei (3 Posts)
  114. Xander75 (2 Posts)
  115. hhanna (2 Posts)
  116. hahacow (1 Post)
  117. janapol (1 Post)
  118. roderick.wu (5 Posts)
  119. saadus (1 Post)
  120. yingwuhahaha (2 Posts)
  121. liuzxtest (2 Posts)
  122. hzwei (5 Posts)
  123. azaqero (3 Posts)
  124. PCalvinClark (1 Post)
  125. arifali (1 Post)
  126. navdimri (2 Posts)
  127. dewoob (2 Posts)
  128. avia4us (1 Post)
  129. DirkWei (1 Post)
  130. setzor (1 Post)
  131. ancorgs (2 Posts)
  132. Sergii (1 Post)
  133. Kranthi1981 (1 Post)
  134. Patrick86 (1 Post)
  135. kamal.addicted (1 Post)
  136. chpsrinu (1 Post)
  137. brian.moeskau (2 Posts)
  138. priyapratheep (1 Post)
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