Grid header filters

[ultraman69]

Hi ! This pluggin seems to be exactly what I need, but I can't make it work :-( I'm a total newbie to EXtJS so, I know the problem is on my side. Probably with my data store. Here's the code that I use :

Ext.onReady(function() {

    var movieStore = new Ext.data.Store({
                    url: 'movies.json',
                    reader: new Ext.data.JsonReader({
                        root: 'rows',
                        id: 'id'
                    }, [
                            'id',
                            'coverthumb',
                            'title',
                            'director',
                            { name: 'released', type: 'date', dateFormat: 'Y-m-d' },
                            'genre',
                            'tagline',
                            { name: 'price', type: 'float' },
                            { name: 'available', type: 'bool' }
                    ])
                });

                movieStore.load();

                var grid = new Ext.grid.GridPanel({
                    renderTo: document.body,
                    frame: true,
                    title: 'Movie Database',
                    height: 300,
                    width: 800,
                    enableColumnMove: true,
                    store: movieStore,
                    plugins: [new Ext.ux.grid.GridHeaderFilters()],
                    cm: new Ext.grid.ColumnModel([{
                        id: 'title',
                        header: "Titre",
                        width: 300,
                        sortable: true,
                        dataIndex: "title",
                        filter: { xtype: "textfield", filterName: "title" }
                    }, {
                        id: "director",
                        header: "Realisateur",
                        width: 200,
                        sortable: true,
                        dataIndex: "director",
                        filter: { xtype: "textfield" }
                    }, {
                        id: "released",
                        header: "Date de sorti",
                        width: 75,
                        sortable: true,
                        dataIndex: "released",
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                        filter: { xtype: "textfield" }
                    }, {
                        id: "genre",
                        header: "Genre",
                        width: 100,
                        sortable: true,
                        dataIndex: "genre",
                        filter: { xtype: "textfield" }
                    }])
                });


            });   //end onReady

This sample comes from a book, but I think it's not really up to date.

The grid is displayed. But the filters don't work. When I enter som text in the second filter field and hit the enter key, the filter fields get highlighted but, the data just stays the same.

Thanks a lot for you help !

[dan_b]

I can't get it to work with 3.3 Beta 2 - it renders momentarily and then on the onafterlayout event the filters are hidden.

[psm1963]

Does anyone know how to set the grid filtering on the fields at runtime/initialization. I would like to use constructors to do this. Any help would be appreciated

[martinrame]

d.zucconi, could you take a look at the AutoExpandColumn bug reported by yumusakg?.

[scottmartin]

Ultraman .... then you _must_ know Giant Robot! .. yes, I am showing my age ...

The filter is just sending the POST params .. you have to tell your app (server side) what to do with the information.

Regards,
Scott.

[kshvakov]

thanks, good plugin

I add

 this.grid.on("columnmove", this.renderFilters.createDelegate(this, [false]), this);
        this.grid.on("columnresize", this.onColResize, this);
        this.grid.on("resize", this.renderFilters.createDelegate(this, [false]), this);
        if(this.stateful)
        {
            this.grid.on("beforestatesave", this.saveFilters, this);
            this.grid.on("beforestaterestore", this.loadFilters, this);
        }

for expand or collapse action in Viewport

[scottmartin]

In testing GridHeaderFilters in 3.3-rc, the filter disappears after refreshing the grid, or anytime after the initial render:
-pagingToolbar - click refresh button
-entering a value in a column filter and hit enter to invoke filter
-leave grid panel and return
-calling resetHeaderFilters(1)

It works fine using 3.2.1

Regards,
Scott.

[kshvakov]

For 3.3 I use

onRender : function () {
        My.Component.superclass.onRender.apply(this, arguments);
        this.el.mask(this.loadMask.msg);
        this.store.load({ params : {limit : pageSize} });
        this.store.on('load', function() {
            this.el.unmask();
            this.filter.renderFilters(false)
        }, this);
       
}

[scottmartin]

While that may work, I really do not want to pollute my code to hack a bug. I guess I need to take a walk through the code when I have the time and find out why the filterpanel feels the need to hide.

Regards,
Scott.

[nickelj]

Is it possible to use this plugin in combination with the ext.ux.livegrid extension?

If so...any examples?

Jim