Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css" />
<style type=text/css>
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}
</style>
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all-debug.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// sample static data for the store
var myData = [
{
'id' : 1001,
'company' : 'Alcoa Inc',
'price' : 29.01,
'change' : 0.42,
'pctChange': 1.47,
'lastChange' : '9/1 12:00am'
},
{
'id' : 1002,
'company' : 'Altria Group Inc',
'price' : 83.81,
'change' : 0.28,
'pctChange': 0.34,
'lastChange' : '9/1 12:00am'
},
{
'id' : 1003,
'company' : 'Wal-Mart Stores, Inc.',
'price' : 45.45,
'change' : 0.73,
'pctChange': 1.63,
'lastChange' : '9/1 12:00am'
}
];
var newRecord = {
'id' : 1004,
'company' : 'Verizon Communications',
'price' : 35.57,
'change' : 0.39,
'pctChange': 1.11,
'lastChange' : '9/1 12:00am'
};
var updateRecord = {
'id' : 1001,
'company' : 'Alcoa Inc',
'price' : 29.04,
'change' : 0.45,
'pctChange': 1.50,
'lastChange' : '9/1 12:20am'
};
// create the data store
var store = new Ext.data.Store({
reader : new Ext.data.JsonReader({
idProperty : 'id',
fields: [
{name : 'id'},
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
})
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Grid Bug',
bbar : [
{
text : "Add new record",
handler : function(){
store.loadData(newRecord, true);
}
},
{
text : "Update record",
handler : function(){
store.loadData(updateRecord, true);
}
}
]
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
[FIXED-1015] store.loadData( myData, true) causes render bug if records are replaced
Originally Posted by ivaylo.bakalov
