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

**jchilders** · 6 Dec 2007 12:06 PM

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?

**mystix** · 6 Dec 2007 5:28 PM

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 =)

**jchilders** · 13 Dec 2007 9:22 AM

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?

**mystix** · 13 Dec 2007 7:47 PM

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.

**jchilders** · 14 Dec 2007 10:16 AM

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.

**mystix** · 16 Dec 2007 9:29 AM

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

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

Thread Tools

Search Thread

Display

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

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