Results 1 to 3 of 3

Thread: [] bufferedrenderer grids on same store, store reload breaks row selection

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Vote Rating

    Default [] bufferedrenderer grids on same store, store reload breaks row selection


    Ext version tested:
    • Ext 4.2.0 rev 489
    Browser versions tested against:
    • Chrome 24
    • IE9
    • FF18
    DOCTYPE tested against:
    • Quirks/None
    • 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
     <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>
        extend: '',
        fields: [
    Ext.define('Books', {
        extend: '',
        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});
    Ext.define('ExtMVC.BooksC', {
        extend: '',
        stores: ['Books'],
        models: ['Book'],
        views: ['BookGrid'],
        init: function() {
                    'bookgrid rownumberer': {
                            headerclick: function(ct,column,e,t) {
    Ext.define('ExtMVC.view.Viewport', {
        extend: 'Ext.Viewport',
        layout: 'fit',
        requires: [
        initComponent: function() {
            var me = this;
            Ext.apply(me, {
                items: [
                            xtype: 'tabpanel',
                            items: [{
                                    title: 'one',
                                    xtype: 'bookgrid'
                                    title: 'two',
                                    xtype: 'bookgrid'
        name: 'ExtMVC',
        controllers: [
        autoCreateViewport: true

    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:
    • only default ext-all.css
    Operating System:
    • Windows 7

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Vote Rating


    You cannot share buffered stores.

    When one grid requires more pages, some pages required by the other gris might well be evicted from the page cache.

    If the dataset is not outrageously huge, try just a normal, fully loaded store, but use the bufferedrenderer plugin to keep the grid's DOM size down.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Vote Rating


    Unfortunately the data set is large and will require the DOM optimizations of the buffered grid.

    Any recommendations for keeping two separate stores for the same data beyond cloning the store?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts