REQUIRED INFORMATION
Ext version tested:Browser versions tested against:DOCTYPE tested against:Description:- If a tabpanel houses two bufferedrenderer grids with a common store, when the store is reloaded from one grid, the other grid will no longer allow row selections
Steps to reproduce the problem:- select rows from grid 1
- tab switch to grid 2 and select rows from grid 2
- reload the store for grid 2
- switch the tab back to grid 1
- select items from grid 1
The result that was expected:- returning to grid 1 after reloading the store in grid 2 allows regular selection of rows
The result that occurs instead:- rows from grid 1 no longer selectable (hover and click events continue to trigger). The last set of selected rows remain highlighted
Test Case:
This code uses a stripped down and single file consolidated version of the Ext MVC XML example grid (originally from loiane, thanks!)
1. load contents
2. click row 1 of the grid in tabpanel "one"
3. switch to tabpanel "two" and click row 2 in the grid
4. click the top left corner cell (the one above the number and to the left of title)
5. this triggers a store reload
6. click row 3 on the current grid and verify selection works
7. switch back to tabpanel "one"
8. click on row 4
9. verify that you can not select row 4
Code:
<html>
<head>
<title>Ext JS 4 MVC</title>
<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="../../ext-4.2-rc/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-4.2-rc/ext-all-dev.js"></script>
<script>
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
'Title'
]
});
Ext.define('Books', {
extend: 'Ext.data.Store',
model: 'Book',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/sheldon.xml',
reader: {
type: 'xml',
record: 'Item',
idProperty: 'ASIN',
totalRecords: '@total'
}
}
});
Ext.define('BookGrid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.bookgrid',
title : 'XML Grid',
plugins: [{
ptype: 'bufferedrenderer'
}],
store: 'Books',
columns: [{
"xtype": "rownumberer"
},{
text: "Title",
dataIndex: 'Title'
}],
initComponent: function() {
this.selModel = new Ext.selection.RowModel({mode: 'MULTI', pruneRemoved: false});
this.callParent(arguments);
}
});
Ext.define('ExtMVC.BooksC', {
extend: 'Ext.app.Controller',
stores: ['Books'],
models: ['Book'],
views: ['BookGrid'],
init: function() {
this.control({
'bookgrid rownumberer': {
headerclick: function(ct,column,e,t) {
ct.ownerCt.getStore().load();
}
}
})
}
});
Ext.define('ExtMVC.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',
requires: [
'BookGrid'
],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
xtype: 'tabpanel',
items: [{
title: 'one',
xtype: 'bookgrid'
},{
title: 'two',
xtype: 'bookgrid'
}]
}
]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'ExtMVC',
controllers: [
'ExtMVC.BooksC'
],
autoCreateViewport: true
});
</script>
</head>
<body>
</body>
</html>
HELPFUL INFORMATION
Screenshot or Video:
Debugging already done:- Issue only happens when the bufferedrenderer plugin is used and only when the grids read from the same store. If the store is unique or the buffered plugin removed, the grid functions properly.
Possible fix:- Do not use buffered renderer with the same store
- Use different stores with buffered renderer
Additional CSS used:Operating System:
[4.2.0.489] bufferedrenderer grids on same store, store reload breaks row selection
Reply With Quote