PDA

View Full Version : Store Issue



alastairD
25 Feb 2007, 7:12 AM
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" />
<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" />
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<h1>Array Grid Example</h1>
<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px;"></div>
</br><a title="empty" onmousedown="emptyTable()">Click to remove row 0</a>
</br><a title="empty" onmousedown="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);
}

jack.slocum
25 Feb 2007, 8:16 AM
Can you put up a link somewhere that I can open it in a debugger?

alastairD
25 Feb 2007, 8:50 AM
Fraid not - but if you take the code above - place it into two files array-grid.html and array-grid.js and make sure they are both in the examples/grid folder then you can run it locally.

jack.slocum
25 Feb 2007, 9:00 AM
Thanks. This will be fixed in the next rev (shortly).

aconran
25 Feb 2007, 9:24 AM
Jack -

Is this fixed in Alpha2 Rev2?

Aaron

jack.slocum
25 Feb 2007, 9:59 AM
No, Rev 3 - compiling right now. :)