PDA

View Full Version : Problem with Ext.ux.grid.TableGrid



teamhonda81
24 Aug 2010, 12:59 PM
I was needing to generate a GridPanel from existing HTML so I was experimenting with the TableGrid extension, but I was running into a little problem. The problem I ran into was that the cells in the first row of the gridPanel would be empty. All subsequent rows in the GridPanel displayed the correct data.

At first, I was pretty confused on what the problem might be because I did a straight copy and paste from the example (http://dev.sencha.com/deploy/dev/examples/grid/from-markup.html), except the only difference between my code and the example (http://dev.sencha.com/deploy/dev/examples/grid/from-markup.html) was that my existing markup was nested inside another table. Once I removed the nested table, the problem went away. However, since my company's website uses nested tables (I know this is bad, but the design was made before I started), I have to keep the html, for the GridPanel, in the nested table.

Here is an example of the problem:



<table>
<tr>
<td>
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th style="width: 40px;">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>
<td>
<tr>
</table>


JS


<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.2.1/TableGrid.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// create the grid
var grid = new Ext.ux.grid.TableGrid("the-table", {
stripeRows: true // stripe alternate rows
});
});
</script>


Screenshot of output is attached.

So in order to solve the problem I was running into, I changed this line of code (55) in the tablegrid.js file to be more specific:

Previous:


var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record: 'tbody tr'
}, fields)
});


New:


var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record: '#'+table.id+' tbody tr'
}, fields)
});


This worked for me but I'm not sure if its the ideal way to correct my problem or if there is some config property that I'm missing when I'm creating a new instance of a TableGrid.

If I have posted this in the wrong place or if this is a known issue, I apologize.