Jack - I have been looking at some of the examples involving Grids - and just to help my understanding of how they work have been altering some of you examples so that I can add and remove rows from a grid.
When using a Store, if I either:
(1) use the removeAll method or
(2) remove records using the remove method individually until no records are left
then when I next attempt to insert a new record at position 0, I get the following error:
r.data has no properties
Firefox points to Line 21194 in ext-all-debug.js:
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
As long as there is one record in the grid I can add in new records ok - but as soon as all the rows have been removed this error occurs. If I then try to insert a new first row a second time it works and no error occurs. Then if you remove all rows and try to add in a new first row you don't get the r.data error! You can get it to throw the error again - if you remove one more row than actually exists - all a bit strange!
I've included below the code to highlight the issue and to see if its something i've missed or if there is a bug.
Cheers.
Below is the modified code for the array-grid.html example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="array-grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../examples.css" target="_blank" rel="external nofollow" />
</head>
<body>
<h1>Array Grid Example</h1>
<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px;"></div>
</br><a title="empty" οnmοusedοwn="emptyTable()">Click to remove row 0</a>
</br><a title="empty" οnmοusedοwn="minimalTable()">Click to add new row at position 0</a>
</body>
</html> and the modified array-grid.js javascript
:
var testTable = null;
var Example2 = {
init : function(){
testTable = new myTable();
}
};
function myTable(){
this.ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
this.ds.load();
this.Plant = Ext.data.Record.create([
{name: 'company', type: 'string'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
this.colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 200, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: myTable.change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: myTable.pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: myTable.italic, dataIndex: 'lastChange'}
]);
// create the Grid
this.grid = new Ext.grid.Grid('grid-example', {
ds: this.ds,
cm: this.colModel
});
this.grid.render();
this.grid.getSelectionModel().selectFirstRow();
}
myTable.prototype.italic = function(value){
return '' + value + '';
}
// example of custom renderer function
myTable.prototype.change = function(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
myTable.prototype.pctChange = function(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
myTable.prototype.changeValues = function(changeOption)
{
var locds = this.grid.getDataSource();
if (changeOption == 1)
{
// locds.removeAll();
var rec = locds.getAt(0);
locds.remove(rec);
}
else if (changeOption == 2)
{
var Plant = Ext.data.Record.create([
{name: 'company', type: 'string'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var p = new Plant({
company: 'Honeywell Intl Inc',
price: 38.77,
change: 0.05,
pctChange: 0.13,
lastChange: '9/1 12:00am'
});
locds.insert(0, p);
}
}
Ext.onReady(Example2.init, Example2, true);
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'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
function emptyTable()
{
testTable.changeValues(1);
}
function minimalTable()
{
testTable.changeValues(2);
} 
 # 2   |
| |
| Â # 3 Â |
| |
| Â # 4 Â |
| |
| Â # 5 Â |
| Jack - Is this fixed in Alpha2 Rev2? Aaron |
| Â # 6 Â |
| |