1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    5
    Vote Rating
    0
    jchilders is on a distinguished road

      0  

    Question [2.0??] stripeRows:true not applying in TableGrid

    [2.0??] stripeRows:true not applying in TableGrid


    I have tried adding stripeRows:true to the TableGrid extension, but no luck.

    Heres my TableGrid extension:

    Code:
    	Ext.grid.TableGrid = function(table, config) {
    	    config = config || {};
    	    var cf = config.fields || [], ch = config.columns || [];
    	    table = Ext.get(table);
    
    	    var ct = table.insertSibling();
    
    	    var fields = [], cols = [];
    	    var headers = table.query("thead th");
    		for (var i = 0, h; h = headers[i]; i++) {
    			var text = h.innerHTML;
    			var name = 'tcol-'+i;
    
    	        fields.push(Ext.applyIf(cf[i] || {}, {
    	            name: name,
    	            mapping: 'td:nth('+(i+1)+')/@innerHTML'
    	        }));
    
    			cols.push(Ext.applyIf(ch[i] || {}, {
    				'header': text,
    				'dataIndex': name,
    				'width': h.offsetWidth+50,
    				'tooltip': h.title,
    	            'sortable': true,
    				'enableColumnMove':false
    	        }));
    		}
    
    	    var ds  = new Ext.data.Store({
    	        reader: new Ext.data.XmlReader({
    	            record:'tbody tr'
    	        }, fields)
    	    });
    
    		ds.loadData(table.dom);
    
    	    var cm = new Ext.grid.ColumnModel(cols);
    
    	    if(config.width || config.height){
    	        ct.setSize(config.width || 'auto', config.height || 'auto');
    	    } else {
    	        ct.setWidth(table.getWidth());
    	    }
    
    	    if(config.remove !== false){
    	        table.remove();
    	    }
    
    	    Ext.applyIf(this, {
            	stripeRows: true,
    	        'ds': ds,
    	        'cm': cm,
    	        'sm': new Ext.grid.RowSelectionModel(),
    			layout:'fit',
    			width : 980,
    			title: "Accounts",
    			disabledClass:'x-item-disabled',
    		    viewConfig: {
    		        forceFit: true
    		    }
    	    });
    	    Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
    	};
    
    	Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);
    I have also tried sending it through the config array when rendering like so...

    Code:
    var acctGrid = new Ext.grid.TableGrid("account-table", {stripeRows:true});
    acctGrid.render();
    Thoughts?
    Last edited by mystix; 6 Dec 2007 at 5:29 PM. Reason: moved to 2.x Help from 2.x Bugs

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    moving this to the 2.0 Help forum instead, since TableGrid is an extension and hence unsupported.

    if however, a genuine bug is revealed in the process of investigating this issue, feel free to post a new bug report in the 1.1.1 / 2.0 bug forum with a link back to this thread. thanks =)

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    5
    Vote Rating
    0
    jchilders is on a distinguished road

      0  

    Default


    So I have found about 5 other posts discussing this problem. Most of them were back in April. Did the stripeRows issue ever get fixed? Any help would be greatly appreciated.

    I also used firebug/DOM viewer and it appears that the x-grid3-row-alt class is not being applied anywhere?

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    there's nothing wrong with the stripeRows config.

    there is however a bug in your TableGrid code.

    here's a full drop-in example which works correctly (drop this into the ext-2.0/examples/grid folder)
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>TableGrid example</title>
    
      <link rel='stylesheet' href='../../resources/css/ext-all.css'>
      <script src='../../adapter/ext/ext-base.js'></script>
      <script src='../../ext-all-debug.js'></script>
    
      <script>
        Ext.grid.TableGrid = function(table, config) {
          config = config || {};
          Ext.apply(this, config); // apply passed-in config
          var cf = config.fields || [], ch = config.columns || [];
          table = Ext.get(table);
    
          var ct = table.insertSibling();
    
          var fields = [], cols = [];
          var headers = table.query("thead th");
          for (var i = 0, h; h = headers[i]; i++) {
            var text = h.innerHTML;
            var name = 'tcol-'+i;
    
            fields.push(Ext.applyIf(cf[i] || {}, {
              name: name,
              mapping: 'td:nth('+(i+1)+')/@innerHTML'
            }));
    
            cols.push(Ext.applyIf(ch[i] || {}, {
              'header': text,
              'dataIndex': name,
              'width': h.offsetWidth+50,
              'tooltip': h.title,
              'sortable': true,
              'enableColumnMove':false
            }));
          }
    
          var ds  = new Ext.data.Store({
            reader: new Ext.data.XmlReader({
              record:'tbody tr'
            }, fields)
          });
    
          ds.loadData(table.dom);
    
          if (config.width || config.height) {
            ct.setSize(config.width || 'auto', config.height || 'auto');
          } else {
            ct.setWidth(table.getWidth());
          }
    
          if (config.remove !== false) {
            table.remove();
          }
    
          // apply default settings (IF they don't already exist)
          Ext.applyIf(this, {
            'ds': ds,
            'cm': new Ext.grid.ColumnModel(cols),
            'sm': new Ext.grid.RowSelectionModel(),
            layout:'fit',
            width : 980,
            disabledClass:'x-item-disabled',
            viewConfig: {
              forceFit: true
            }
          });
          Ext.grid.TableGrid.superclass.constructor.call(this, ct, {});
        };
        Ext.extend(Ext.grid.TableGrid, Ext.grid.GridPanel);
    
        Ext.onReady(function() {
          var btn = Ext.get("create-grid");
          btn.on("click", function() {
            btn.dom.disabled = true;
            var grid = new Ext.grid.TableGrid("the-table", {
              stripeRows: true,
              title: 'My Table'
            }); // create the grid
            grid.render();
          }, false, {single:true}); // run once
        });
     </script>
    </head>
    <body scroll="no"><!-- scroll="no" to remove IE's irritating scrollbar -->
      <button id="create-grid" type="button">Create grid</button>
      <br />
      <br />
      <table cellspacing="0" id="the-table">
        <thead>
          <tr style="background:#eeeeee;">
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Barney Rubble</td>
            <td>32</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>Fred Flintstone</td>
            <td>33</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>Betty Rubble</td>
            <td>32</td>
            <td>Female</td>
          </tr>
          <tr>
            <td>Pebbles</td>
            <td>1</td>
            <td>Female</td>
          </tr>
          <tr>
            <td>Bamm Bamm</td>
            <td>2</td>
            <td>Male</td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>
    your TableGrid code is incorrect because it doesn't apply any passed-in configs.

    p.s. i've also replied to your one-liner in 2.0 bugs.

  5. #5
    Ext User
    Join Date
    Oct 2007
    Posts
    5
    Vote Rating
    0
    jchilders is on a distinguished road

      0  

    Default


    Thank you so much! Works great.

    I read somewhere that all I had to do was replace "Grid" with "GridPanel" to get the 1.1.1 example working in 2.0.

    I should have known it wasn't that easy.

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    well, IIRC, it's just slightly harder than that

    some links that'll get you up to speed on the 1.x to 2.0 migration path:
    http://extjs.com/learn/Ext_1_to_2_Migration_Guide
    http://extjs.com/learn/Ext_2_Overview

Thread Participants: 1

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