Grid Reconfigure does not show data in column without reloading store

Grid Reconfigure does not show data in column without reloading store

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>

It looks like the way you wrote and used the test store there won't be any listeners on it when it is created in the grid.

Code:

listeners: {}

wipes away the listeners on the stores prototype.

Originally Posted by JGALFO

//BTW, how could I refer to the parent grid in here instead of searching for it?

For the most part you should never need to do a query to reference an object that gets created in related code. There are many ways to get a reference with different scopes and closures. One suggestion would be to add the listeners when the store is created and not on the class definition.

#1,
You need to let the grid know you want locking functionality, you do this by either:
1) Specifying locked columns
2) Adding the enableLocking flag

Otherwise the grid would need to initialize locking in pretty much all cases.

#2,
It's a minor bug when you rebind the same store. For now just pass null instead of the same store to work around it.

#3/#4
Not sure how to reproduce this from your test case, I didn't see any odd behaviour. If you apply the fix to your test case (passing null instead of the same store), is it still reproducible? If so, please post the steps to replicate the problem.

#2 is Fixed with the workaround you specified. Now grids correctly reconfigure the columns without having to necessarily load the store. #3 and #4 were related, they also work fine now.

#1. I still can't get this to work as I think it should: The following are steps to reproduce.

Use my new code attached as the gridDynamic.js which includes your suggested fixes.

On load, the original store is configured to use one locked column (note that if you remove the locked:true on the this.columns array all subsequent reconfigures that include the locking on the json data will be ignored). As you see in the code I am trying to force the enableLocking property accordingly. (unless there's some other way I am supposed to do it)

After initial load click on Swap to group. Note that depending on how the initial lock property was set you will or will not see the locking.

From step 3, click on Swap (NoGroup/NoLock). Notice again that depending on the initial lock property you do or do not see the lock. In this case you should not see it at all but you do in the rowcolumn.

Finally, now click on Swap to Orig and notice that now the lock is gone even though I am trying to force it on.

I may just not be toggling the enableLocking correctly...

Thanks.

By the way, I think a similar test case would make a good candidate for the grid examples.

I realize that but then if grid.reconfigure() is supposed to support any type of column config change then this is a bug because it does not do that right now. You cannot swap from a regular to a locked grid and viceversa.

That isn't really the intent. There's overhead associated with creating a locked grid, doing so after the grid has already been constructed would prove to be rather difficult. As such, you need to configure the grid so that it may need locking in future.

it seems that from prods2.json file only the metaData is being used not the data?

it seems that from prods2.json file only the metaData is being used not the data?

Hi All

Thanks for the information above.
I am using Extjs 4.2.2 and would like to create a grid control that will receive its how to show and what to show from a json file. With the information above, I thought I found the silver bullet. Everything seemed OK until I realized that, if you change the "Product One" to "Product 1" in the prods2.json file and push the button that loads the store sourcing from prods2.json, you will see the column configuration changed, but not the column contents. The "name" column will read "Product One" and my hope was to see "Product 1".