PDA

View Full Version : Grid plugin not saving state



abarash
11 Aug 2010, 1:30 PM
Hi,

I'm not sure whether or not this is the right forum in which to post this, but it's related to where I'm having the problem, so here goes:

As I mentioned in this (http://www.sencha.com/forum/showthread.php?103520) thread, I've added the ux.grid.GridFilters plugin to a grid. I've also added a CookieProvider to save the state of the grid/page.

While the grid's state (columns displayed/hidden/etc) is saved, the state of the filters is not. When I reload the page, the correct columns display with the appropriate sorting, but the filters' state is lost.

In a different project I created pre-Designer, it works correctly: both the grid's state and filters' states are stored correctly. The only difference I can see is that I added the GridFilter plugin in the grid's config in the other project and added the plugin within the initComponent function in this project.

Does anybody have any ideas? Should I post some code samples?

Thank you,

Andrew

jarrednicholls
12 Aug 2010, 12:01 PM
Hey Andrew,

Yes code examples would be great. I'll also track down and get the GridFilters plugin so I can see what's going on in its code. initComponent is called before initPlugins and initState in the Component constructor life cycle....so I would have expected it to work the same. The only thing I can think of is if it relies on the initialConfig properly of the Grid...just not sure at the moment.

Thanks.

abarash
13 Aug 2010, 2:35 PM
Hi Jarred,

I'm attaching 3 files:
1. working.txt (rename to .js) - this is the core of the javascript file I wrote pre-Designer that includes a grid with a working ux.grid.GridFilters (that save their state across page refreshes). That project is using ExtJS 3.2.0 and it's using the ux-all.js file I retrieved from within the ExtJS download.
2. Site Survey.xds - this is the current project created using Ext Designer.
3. AdminViewport.txt (rename to .js) - this is the file that has all my custom code. Within this file, I add the ux.grid.GridFilters plugin (see line 112). As I mentioned above, the grid seems to save its state, but the filters do not.

Let me know if there's any other info I can give you to help diagnose what's going on here.

Thank you for taking a look! I'd appreciate any insight you can provide...

Andrew

jarrednicholls
15 Aug 2010, 7:31 PM
Ok great, I will get back to you soon enough.

abarash
16 Aug 2010, 11:10 AM
I just noticed I didn't post it above - for what it's worth, though. The current project (with the filter state not saving) is ExtJS 3.2.1.

Thanks again!

abarash
14 Sep 2010, 2:03 PM
bump...? ;)

jarrednicholls
15 Sep 2010, 5:39 AM
Hey there,

The plugin is simply listening to beforestaterestore and beforestatesave of the GridPanel. I don't see anything indicative in the code that would prevent it from working on a GridPanel sub-class such as is produced by the Designer. I'm assuming the filter's menu shows up in the GridPanel at least?

abarash
15 Sep 2010, 8:45 AM
Hi Jarred,

Yes, the filter's menu shows up in the GridPanel and functions fine, it just doesn't save the state.

At last night's suggestion (which I strangely don't see here), I tried two things:
1. I tried just adding it to the plugins array without calling initPlugin. This resulted in the filter's menu not showing up at all.
2. I tried calling initPlugin without adding it to the plugins array. This resulted in the same behavior as I get now: I get the filter menu and the filters function appropriately, but the state of the filter is not restored after a page refresh. The state of the rest of the grid (sorting, columns, etc) is restored, as it was before.

I'm seeing the grid's filter cookies being set, it looks like the filter isn't reading them for some reason.

Do you have any other suggestions?

Thanks!

Andrew

PS - I've signed up for the conference - I'll see you there!

jarrednicholls
15 Sep 2010, 11:33 AM
Andrew,

That's great that you're going to the conference! Very exciting, can't wait to meet you.

Ok so I figured out the issue. It happens to be because of the way the plugin is being initialized (it's happening too late in the life cycle). Because the GridPanel has already been instantiated after the superclass initComponent function runs, it has already initialized its state. The GridFilters plugin only applies its state by listening to the GridPanel's 'beforestaterestore' event. Because the GridPanel's state has already been initialized by the time the plugin is initialized, that event is never fired by the GridPanel. When the plugin is added to the GridPanel's configuration directly (as in your "working.txt" example), it is initialized before the GridPanel initializes its state and thus works.

You can solve this one of two ways:

1) The easy way. Add a "initState()" call for each grid after you add its GridFilters plugin. This will fire the necessary event and everything will be ok. The downside (if you can even call it that) is that the GridPanel's state is applied two times, one unnecessarily. It's not a very expensive operation so it could be deemed negligible.



this.grid_rests.plugins = [
this.grid_rests.initPlugin(
new Ext.ux.grid.GridFilters({
filters:[
{type: 'numeric', dataIndex: 'rid'},
{type: 'string', dataIndex: 'name'},
{type: 'string', dataIndex: 'pcname'},
{type: 'string', dataIndex: 'aename'}
]
})
)
];
this.grid_rests.initState();


2) The slightly harder but more proper way. BACKUP YOUR PROJECT FIRST You can right-click on each grid and "Promote to Class" on each one. This will turn each grid into its own top-level component, making it its own class when exported with the project. You can then configure the plugin for each grid directly by saying this.plugins = [new Ext.ux.grid.GridFilters()]; in the initComponent. The plugin will thus exist and be initialized prior to initState() being called under-the-hood. In other words, the plugin will participate as a part of the GridPanel instantiation/construction. The plugins are currently being added after each GridPanel has already gone through its construction process.

Hopefully that makes sense and helps! Let me know if you get it to work.

abarash
15 Sep 2010, 11:42 AM
Thanks for the speedy response!

It definitely makes sense. It took a combo of the above and #1 to get the easy way working - I'm doing that for the very short term to make my users happy:

// this.grid_rests.plugins = [
this.grid_rests.initPlugin(
new Ext.ux.grid.GridFilters({
filters:[
{type: 'numeric', dataIndex: 'rid'},
{type: 'string', dataIndex: 'name'},
{type: 'string', dataIndex: 'pcname'},
{type: 'string', dataIndex: 'aename'}
]
})
);
// ];
this.grid_rests.initState();
I'll work on #2 after lunch - it does sound like the more proper way to go. I'll let you know what happens with that.

Thanks again!