Buffered Renderer reconfigure,loadData functions not working properly
REQUIRED INFORMATION
Ext version tested:Browser versions tested against:DOCTYPE tested against:Description:- When the data is loaded using loadData/reconfigure function, data is not loaded properly.
Steps to reproduce the problem:- 1. Select a row on the first grid, to reload the second grid
2. Open second grid.
The result that was expected:- 1. Data is reloaded to the grid.
The result that occurs instead:- 1. Only 100 rows are loaded, and clicking the grid has no response.
Test Case:
HTML Code
Code:
<html>
<head>
<title>Buffered Renderer Grid LoadData/Reconfigure does not work</title>
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<!-- GC -->
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="buffered-renderer-bug.js"></script>
<style type="text/css">
.emptyText {
margin: 5px;
}
</style>
</head>
<body>
<h1>Buffered Renderer Grid LoadData/Reconfigure Bug</h1>
<p>
When the data is loaded using loadData/reconfigure function, data is not loaded properly.
</p>
<p>
To reproduce:
1. Select a row on the first grid.
2. Open second grid, only 100 rows are loaded, and clicking the grid has no response.
</p>
<p>Note that the js is not minified so it is readable. See <a href="buffered-renderer-bug.js">buffered-renderer-bug.js</a>.</p>
</body>
<div id="button-container"></div>
<p></p>
<div id="grid-container"></div>
</html>
ExtJS Code
Code:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
Ext.onReady(function(){
/**
* Returns an array of fake data
* @param {Number} count The number of fake rows to create data for
* @return {Array} The fake record data, suitable for usage with an ArrayReader
*/
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
id: 'rec-' + i,
rating: rating,
salary: salary,
name: name
});
}
return data;
}
// Create the Data Store.
// Because it is buffered, the automatic load will be directed
// through the prefetch mechanism, and be read through the page cache
var store1 = Ext.create('Ext.data.Store', {
id: 'store',
data: createFakeData(5000),
model: 'Employee',
proxy: {
type: 'memory'
}
});
var jumpToRow = function(){
var fld = grid.down('#gotoLine');
if (fld.isValid()) {
grid.view.bufferedRenderer.scrollTo(fld.getValue() - 1, true);
}
};
var store2 = Ext.create('Ext.data.Store', {
id: 'store',
model: 'Employee',
proxy: {
type: 'memory'
}
});
var grid2 = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Bufffered Grid of 2,500 random records',
store: store2,
loadMask: true,
plugins: 'bufferedrenderer',
selModel: {
pruneRemoved: false
},
selType: 'checkboxmodel',
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}],
bbar: [{
labelWidth: 70,
fieldLabel: 'Jump to row',
xtype: 'numberfield',
minValue: 1,
maxValue: store2.getTotalCount(),
allowDecimals: false,
itemId: 'gotoLine',
enableKeyEvents: true,
listeners: {
specialkey: function(field, e){
if (e.getKey() === e.ENTER) {
jumpToRow();
}
}
}
}, {
text: 'Go',
handler: jumpToRow
}]
//,renderTo: Ext.getBody()
});
var grid1 = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Bufffered Grid of 5,000 random records',
store: store1,
loadMask: true,
plugins: 'bufferedrenderer',
selModel: {
pruneRemoved: false
},
selType: 'checkboxmodel',
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}],
bbar: [{
labelWidth: 70,
fieldLabel: 'Jump to row',
xtype: 'numberfield',
minValue: 1,
maxValue: store1.getTotalCount(),
allowDecimals: false,
itemId: 'gotoLine',
enableKeyEvents: true,
listeners: {
specialkey: function(field, e){
if (e.getKey() === e.ENTER) {
jumpToRow();
}
}
}
}, {
text: 'Go',
handler: jumpToRow
}],
listeners:{
scope:this,
selectionchange:function(){
//Bug 1 - load data does not work.
//grid2.getStore().loadData(createFakeData(2500));
//Bug 2 - reconfigure data does not work
var store3 = Ext.create('Ext.data.Store', {
id: 'store',
data: createFakeData(3000),
model: 'Employee',
proxy: {
type: 'memory'
}
});
grid2.reconfigure(store3);
//store3.load();
//store3.loadPage(1);
}
}
});
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 800,
height: 400,
renderTo: Ext.getBody(),
items: [grid1,grid2]
});
store2.loadData(createFakeData(2500));
});
HELPFUL INFORMATION
Screenshot or Video:See this URL for live test case: http://Debugging already done:Possible fix:Additional CSS used:- only default ext-all.css
- custom css (include details)
Operating System:
