Grid Reconfigure does not show data in column without reloading store

**JGALFO** · 10 Nov 2012 12:45 PM

There maybe several issues with Grid Reconfigure:

I am using Ext 4.1.3 and 4.1.4 but I am pretty sure other close versions have it as well.

If the original column config does not include one locked column, the subsequent metaData configs will ignore the locked columns when loaded.
When reconfiguring a grid with new columns and the same store, data does not show on the newly shown columns.
- I am assuming here that we don't need to reload the store if the original one had the fields I need it.
When reconfiguring from regular columns to grouped columns with the same store, some columns get misplaced, others show no data as in item 2.
When reconfiguring from grouped columns to remove some of the other groups, headers get removed but not the columns

Attached are test case files files:

gridDynamic.html
gridDynamic.js
prods.json and prods2.json

gridDynamic.html

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Grid example</title>
<link rel="stylesheet" type="text/css" href="../../../extjs-4.1.4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../../extjs-4.1.4/examples/shared/example.css" />
<style>
    .bugDiv { margin: 10px 20px;color:gray;}
    #grid-example { margin: 15px 0 0 25px;}
</style>
<script type="text/javascript" src="../../../extjs-4.1.4/ext-all-debug.js"></script>


<script type="text/javascript" src="gridDynamic.js"></script>
</head>
<body>
    <h2>Dynamic Grid Testing</h2>

    <p>This page test cases the grid reconfig functionality. The buttons on the toolbar execute the different test cases</p>


    <p>1: On initial page load, the grid is configured to one locked column and it loads data without firing the <i>metachange</i> event.</p>
        <div  class="bugDiv">
            <b>Bug 1:</b> If the original config does not include one locked column, the subsequent metaData configs will ignore the locked columns.
        </div>
    <p>2: <b>Swap to Group & Swap (no Grouping)</b> Reconfigures grid redefining the store by loading it and firing the <i>metachange</i> event. This correctly reconfigures the grid. (Note bug 1 however)
    
    </p>


    <p>3. <b>Swap (no reload)</b> In this case I am trying to reconfigure the grid to show only certain columns (no change on the store). Shouldn't data be shown in the new columns?
    
    </p>
    
    <p>4. <b>Swap from no group to grouped cols: </b> </p>
    <div class="bugDiv">    
            <p>a. Reload page and click on Swap (no grouping)</p>
            <p>b. click on Swap (no reload). Notice the type column data is now on the status column and the expires data is missing</p>
        </p>
    </div>


    <p>5. <b>Swap from grouped columns to reconfigure: </b> </p>
    <div class="bugDiv">    
            <p>a. Reload page and click on Swap to group</p>
            <p>b. click on Swap (no reload). Notice the headers were removed but not the columns</p>
        </p>
    </div>


    <p>6: <b>Swap to Original:</b> Correctly reconfigures the grid to the original store/column setup but locked column is gone. <b>Bug 3</b> (or related to bug 1?)
    </p>
    
    <div id="grid-example"></div>


</body>
</html>

gridDynamic.js

Code:



Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    fields: [
             { "name": "id", "type": "int" }
            ,{ "name": "name", "type": "string" }
            ,{ "name": "type", "type": "string" }
            ,{ "name": "castatus", "type": "string" }
            ,{ "name": "nystatus", "type": "string" }
            ,{ "name": "caexpire", "type": "date" }
            ,{ "name": "nyexpire", "type": "date" }
        ]
});








Ext.define('TestStore',{
     extend: 'Ext.data.Store'
    ,alias: 'widget.teststore'
    
    ,proxy: {
        type: 'ajax',
        url : '../data/prods.json',
        reader: {
             type: 'json'
            ,root: 'data'
        }
    }
});












Ext.define('TestGrid',{
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.testgrid'
    
    ,initComponent: function(){
        var me=this;
        
        // orig store will not have the listener...
        this.origStore = new TestStore({
              storeId: 'prodStore'
             ,fields: this.getAllFields()
        });
        
        this.store = this.origStore;
        this.columns = [
            // Bug 1: if no column is specified, locking does not seem to work with metaData
            { text: 'Name',  dataIndex: 'name', width: 100, locked: true }
        ];
        
        this.createToolbars();
        
        this.callParent();
    }
    
    ,doOrigStore: function(){
        // Bug 2: returning to the original config "forgets" the locked column
        this.reconfigure(this.origStore,this.columns);
        this.store.load();
    }
    
    ,swapGridConfig: function(btn){
        // Swapping the store and the columns. This works fine


        switch (btn.configOption) {
            
            case 2:
                var newCols = undefined
                    ,url = '../data/prods.json';
            break;
            
            case 3:
                var newCols = [ 
                     { "xtype": 'rownumberer', "width": 35, "locked": true }            
                    ,{ "text": "Name", "dataIndex": "name","width":100,"locked": true }            
                    ,{ "text": "ID", "dataIndex": "id", "width": 60 }           
                ];
                var url = '../data/prods2.json';
                
            break;
        }
        
        var newStore = new TestStore({
             storeId: 'gridStore' + btn.configOption
            ,grid: this
            ,proxy: {
                url: url,
                type: 'ajax',
                reader: {
                    type: 'json'
                    ,root: 'data'
                }     
            }
            ,listeners: {
                'metachange': function(store, meta) {
                    this.grid.reconfigure(store, meta.columns);
                }
            }
        });                


        this.store = newStore;
        this.reconfigure(this.store,newCols);
        
        this.store.load();
    }
    
    ,swapGridColGroupConfig: function(btn){
        // In this example I am swapping the config with a new grouped col config (basically removing other states)
        var newCols =  [
             { "text": "Name", "dataIndex": "name","width":100, "locked": true }          
            ,{
                "text": "CA"
                ,"itemId": "CA"
                ,"columns": [
                     { "text": "Status", "dataIndex": "castatus", "width": 60 }
                    ,{ "text": "Expires", "dataIndex": "caexpire", "width": 60, "format": 'Y-j-m' }
                ]
                
            }
        ];
        
        
        if(btn.configOption ===6){
            // this will work because I am reloading the store
             var newStore = new TestStore({
                 storeId: 'gridStoreGroupTest'
                ,grid: this
                ,proxy: {
                    url: '../data/prods.json',
                    type: 'ajax',
                    reader: {
                        type: 'json'
                        ,root: 'data'
                    }     
                }                
            });  
            this.store = newStore;
            this.store.load();
        
        } 
        // But without reloading, the new columns have no data using the same store!
        this.reconfigure(this.store,newCols);
        
        //console.log(this.store);
        //newStore.load();
    }
    
    ,getAllFields: function(){
        return [
             { "name": "id", "type": "int" }
            ,{ "name": "name", "type": "string" }
            ,{ "name": "type", "type": "string" }
            ,{ "name": "castatus", "type": "string" }
            ,{ "name": "nystatus", "type": "string" }
            ,{ "name": "caexpire", "type": "date" }
            ,{ "name": "nyexpire", "type": "date" }
        ];
    }
 
    ,createToolbars: function(){
        this.dockedItems = [ 
            {
                xtype: 'toolbar'
                ,dock: 'top'
                ,items: [
                    { xtype: 'button'
                        ,text: 'Swap to Orig'
                        ,configOption: 1
                        ,tooltip: {text:'Swaps back to original config'}
                        ,scope: this
                        ,handler: this.doOrigStore
                    }
                    ,{
                         xtype: 'button'
                        ,text: 'Swap to Group'
                        ,tooltip: {text:'Swaps to grouped columns and store with metaData config'}
                        ,configOption: 2
                        ,scope: this
                        ,handler: this.swapGridConfig
                    }                    
                    ,{
                         xtype: 'button'
                        ,text: 'Swap (no Grouping)'
                        ,tooltip: {text:'Swaps columns and store with metaData config'}
                        ,configOption: 3
                        ,scope: this
                        ,handler: this.swapGridConfig
                    }
                    ,{
                        xtype: 'button'
                        ,text: 'Swap (no reload)'
                        ,tooltip: {text:'reconfigure columns without loading store'}
                        ,configOption: 4
                        ,scope: this
                        ,handler: this.swapGridColGroupConfig //this.swapState
                    }
                    ,{
                        xtype: 'button'
                        ,text: 'CA'
                        ,tooltip: {text:'reconfigure columns without loading store. Should not data show?'}
                        ,configOption: 5
                        ,scope: this
                        ,handler: this.swapGridColGroupConfig //this.swapState
                    }
                    ,{
                        xtype: 'button'
                        ,text: 'NY'
                        ,tooltip: {text:'reconfigure columns loading store'}
                        ,configOption: 6
                        ,scope: this
                        ,handler: this.swapGridColGroupConfig //this.swapState
                    }                    
                ]
            }
            ,{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                         xtype: 'pagingtoolbar'
                        ,store: this.store
                        ,pageSize: 25
                        ,border: false
                        ,displayInfo: true
                        ,displayMsg: 'Records {0} - {1} of {2}'
                    }
    
                ]
            }
        ]
        return this.dockedItems;
    }    
});








Ext.onReady(function() {
    Ext.QuickTips.init();




    var grid = new TestGrid({
         xtype: 'testgrid'
        ,itemId: 'test-grid'
        ,title: 'Grid Reconfigure'
        ,height: 200
        ,width: 500
        ,renderTo: Ext.get('grid-example')
    });
    
    Ext.StoreMgr.lookup('prodStore').loadPage(1);
});

prods.json

Code:

{
    "data": [
       {
           "id": 1,
           "name": "Product One",
            "castatus": "Approved",
               "caexpire": "September, 10 2012 00:00:00",
               "nystatus": "Rejected",           
            "nyexpire": "November, 21 2012 00:00:00",
            "type": "Type 1"
       },
       {
           "id": 2,
           "name": "Product Two",
           "castatus": "Approved",
           "caexpire": "January, 1 2012 00:00:00",
           "nystatus": "Rejected",
           "nyexpire": "November, 21 2012 00:00:00",
           "type": "Type 2"
       }
    ]
    ,"metaData": {
        "fields": [
             { "name": "id", "type": "int" }
            ,{ "name": "name", "type": "string" }
            ,{ "name": "type", "type": "string" }
            ,{ "name": "castatus", "type": "string" }
            ,{ "name": "nystatus", "type": "string" }
            ,{ "name": "caexpire", "type": "date" }
            ,{ "name": "nyexpire", "type": "date" }
        ],
        "columns": [
             { "xtype": 'rownumberer', "width": 35, "locked": true }
            ,{ "text": "Name", "dataIndex": "name","width":100, "locked": true }          
            ,{
                "text": "CA"
                ,"itemId": "CA"
                ,"columns": [
                     { "text": "Status", "dataIndex": "castatus", "width": 60 }
                    ,{ "text": "Expires", "dataIndex": "caexpire", "width": 60, "format": 'Y-j-m' }
                ]
                
            }
            ,{
                "text": "NY"
                ,"itemId": "NY"
                ,"columns": [
                     { "text": "Status", "dataIndex": "nystatus", "width": 60 }
                    ,{ "text": "Expires", "dataIndex": "nyexpire", "width": 60 , "format": 'Y-j-m'}
                ]
                
            }            
            ,{ "text": "type", "dataIndex": "type" }
        ]
    }
}

prods.json

Code:

{
    "data": [
       {
           "id": 1,
           "name": "Product One",
            "castatus": "Approved",
               "caexpire": "September, 10 2012 00:00:00",
               "nystatus": "Rejected",           
            "nyexpire": "November, 21 2012 00:00:00",
            "type": "Type 1"
       },
       {
           "id": 2,
           "name": "Product Two",
           "castatus": "Approved",
           "caexpire": "January, 1 2012 00:00:00",
           "nystatus": "Rejected",
           "nyexpire": "November, 21 2012 00:00:00",
           "type": "Type 2"
       }
    ]
    ,"metaData": {
        "fields": [
             { "name": "id", "type": "int" }
            ,{ "name": "name", "type": "string" }
            ,{ "name": "type", "type": "string" }
            ,{ "name": "castatus", "type": "string" }
            ,{ "name": "nystatus", "type": "string" }
            ,{ "name": "caexpire", "type": "date" }
            ,{ "name": "nyexpire", "type": "date" }
        ],
        "columns": [
             { "text": "Name", "dataIndex": "name","width":100, "locked": true }          
            ,{ "text": "type", "dataIndex": "type" }
        ]
    }
}

Grid Reconfigure does not show data in column without reloading store

Thread Tools

Search Thread

Display

Threaded View

Grid Reconfigure does not show data in column without reloading store

Grid Reconfigure does not show data in column without reloading store

Tags for this Thread