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:
and the modified array-grid.js javascript
:
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" ο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>
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); }
![Reply With Quote](http://extjs.com/forum/images/buttons/quote.gif)
#
2
![]() |
![]()
Can you put up a link somewhere that I can open it in a debugger?
![]() |
#
3
![]() |
![]()
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.
![]() |
#
4
![]() |
![]()
Thanks. This will be fixed in the next rev (shortly).
![]() |
#
5
![]() |
![]()
Jack -
Is this fixed in Alpha2 Rev2? Aaron ![]() |
#
6
![]() |
![]()
No, Rev 3 - compiling right now.
![]() ![]() |