Saving metadata and working with Ext.ux.grid.GridFilter

[bullfish]

Hello,

I am trying to have a grid with dynamic metadata. My solution is based on this code. I am able to receive the metadata and the data itself.

Now I have several questions:
1.) How can I send the metadata back to the server? What would be the best solution to achieve this? I tried to put listeners in the ColumnModel but they are not getting called
2.) I am using the Ext.ux.grid.Search addon. But it seems not to have access to the ColumnModel, because the columns of the grid are not getting showed.
3.) I am receiving the field names as metadata. How can I dynamically create the "var filter"-part so that I don´t have redundant code?
4.) Special question, if you maybe use the Ext.ux.grid.GridFilters yourself. The icons there are on top of each other. Does anybody have the same problem?

Thanks for your help!
bullfish


This is my code so far:

var filters = new Ext.ux.grid.GridFilters({filters:[
                {type: 'numeric',  dataIndex: 'form_number'},
                {type: 'string',  dataIndex: 'applicant'},
                {type: 'string',  dataIndex: 'project_number'},
                {type: 'string', dataIndex: 'name'},
                {type: 'date',  dataIndex: 'creation_date'},
                {type: 'list', dataIndex: 'status',
                 options: ['Eröffnet', 'small', 'medium', 'large', 'extra large'],
                 phpMode: true
                }
                ]
});

var projects_store = new Ext.data.JsonStore({
    url: '/grids/Project/',
    fields: [],
    autoLoad: true,
    paramsAsHash: true,
    remoteSort: true,
    writer: new Ext.data.JsonWriter(),
    autoSave: true,
});

// In a window as item:

 this.projects_grid = new Ext.grid.GridPanel({
                        id: 'projects_grid',
                        border:false,
                        constrain: false,
                        constrainHeader: false,
                        width:940,
                        height:360,
                        autoScroll:true,
                        autoHeight:false,
                        cm:  new Ext.grid.ColumnModel({
                            defaults: {
                                width: 150
                            },
                            listeners: {
                                hiddenchange: function(cm, colIndex, hidden) {
                                    tocon("hiddenchange");
                                    saveConfig(colIndex, hidden);
                                },
                                columnmoved: function(cm, oldIndex, newIndex) {
                                    tocon("columnmoved");
                                },
                                configchange: function(cm) {
                                    tocon("configchange");
                                }
                            }
                        }), //new Ext.grid.RowNumberer();
                        store: projects_store,
                        viewConfig: {
                            onDataChange: function(){
                               tocon("onDataChange");
                               this.cm.setConfig(this.ds.reader.jsonData.columns);
                               //making sure the focus anchor is positioned at the top left,
                               //so pressing a key won't make the grid jump to it's previous
                               //(no longer valid) position.
                               this.syncFocusEl(0);
                           }
                        },
                         bbar: new Ext.PagingToolbar({
                            pageSize: 30,
                            store: projects_store,
                            displayInfo: true,
                            displayMsg: 'Zeige Projekte {0} bis {1} von {2}',
                            emptyMsg: "Keine Projekte gefunden",
                            plugins: filters,
                            items: ['-',{
                                    text: 'Lösche Filter',
                                    iconCls: 'remove',
                                    handler: function () {
                                        filters.clearFilters();
                                    }
                                }
                            ]
                        }),
                        loadMask: true,
                        listeners: {
                            render: {
                                fn: function(){
                                    tocon("render")
                                    projects_store.load({
                                        params: {
                                            view: 'minimal',
                                        }
                                    });
                                }
                            }
                        },
                        plugins: [
                            filters,
                            new Ext.ux.grid.Search({
                                iconCls:'icon-zoom',
                               // ,readonlyIndexes:['note']
                               // ,disableIndexes:['pctChange']
                                minChars:2,
                                mode: 'remote',
                                autoFocus:true,
                                position:'top',
                                //menuStyle:'radio'
                            })
                        ]
})

[bullfish]

Hi! Is here anybody who could please help me? At least with question no. 1? Thank you so much!

[hobophobik]

For the filters I do this.

// From my meta data I build a CM similar to this
var cols = [
  { header: 'Desc', dataIndex: 'tck_desc', filter: {dataIndex: 'tck_desc', type: 'string'}, id: 'tck_desc' }
]

// And use a filter plugin with no config
var grid = new Ext.grid.GridPanel({
  ...
  columns: cols,
  plugins:new Ext.ux.grid.GridFilters({})
  ...
});

[bullfish]

Hi hobophobik,

I tried your filter code and added the "filter: {...}" part to my server response. But I get the javascript error "config.filters is undefined". Did you change something else? What else may I do wrong?

Thanks for your code example!

[darthwes]

You have to declare 'fields' on your store, 'columns' on your cm. Generally you should have:

var store = ...;
var filters = ...;
var grid = new Ext.grid.GridPanel({
  store: store,
  cm: new Ext.grid.ColumnModel({
    defaults: { sortable: true },
    columns: ...
  }),
  plugins: [filters],
  ... //sm, viewConfig, title, sizing, anchoring
});

The dataIndex in the filters and column model must match a field in the store.