Grid header filters

[stevwinata]

hy d.zucconi......this plugin is work in Ext 3.3, i'm using your latest code for Ext 3.3 in previous page..thanks a lot for it.now,
The grid is displayed. But the filters don't work. When I enter some text in the any filter field and hit the enter key, the filter fields get highlighted but, the data just stays the same....any suggest for my datastore??firebug is ok..

[d.zucconi]

Hi d.zucconi,

it's really great to see the new release for Ext 3.3 because of more problems with the older version. I am using your filter plugin for all my grids and the "reconfigure" function is for my application really critical. Unfortunately I'm not able to repair this code to support it. Please are you planning to finish it or can you get me an advice how to do it? I need to reconfigure column model and the header filter is not visible.

The current beta doesn't support grid reconfiguration.
At this moment I don't have much time for plugin development... maybe at the end of this month.
Unfortunately I don't use grid reconfiguration in my apps, so the plugin wasn't engineered to support it...

[d.zucconi]

the filters don't work. When I enter some text in the any filter field and hit the enter key, the filter fields get highlighted but, the data just stays the same....any suggest for my datastore??firebug is ok..

It's hard to say what is the cause of your problem without an example of your code...

[rubaiz]

Still no demo page?

[sajidalimudassar]

Hello, I am using ExtJs 3.3.1.
I have updated my GridHeaderFilters to 2.0.2b. but I am having an issue.
Normal filter, like text and date types are properly working but combo filters using JsonStore are not working. here is the sample code.

filter: {
                xtype : 'combo',
                displayField : 'title',
                store : new Ext.data.JsonStore({
                    root: 'items',
                    fields: [ {name:'id',type:'int'},'title' ],
                    data: {"items":[{"id":"1","title":"Concrete"},{"id":"2","title":"Grout"}]}
                }),
                triggerAction: 'all',
                valueField : 'id',
                hiddenName : 'id',
                typeAhead : true,
                name: 'id',
                mode : 'local',
                filterName: "id"
            } 

This was working with ExtJs 3.2 and GridHeaderFilters version 1.0.12.

[daddie888]

Hello, i use version 2.0.3 of GridHeaderFilters with Ext Js 3.3.1 and have the following problem in IE7 but not in FF3.5
When the window is too small to show the full width of the columns the width of the columns shrinks to show all of the table but not the filters, they are cut off by the next filter/column
See the attachment for an example.

Here my ColumnModel

cm1Midoc = new Ext.grid.ColumnModel({
      defaults: {"sortable": true, "menuDisabled":false, "align":"right"},
      columns: [
        {"id":"id", "header": "id", "hidden": true, "dataIndex": "id", "width": 40, "filter":[{xtype:"numberfield",style: 'text-align: right', emptyText:'van'},{xtype:"numberfield", style: 'text-align: right', emptyText:'tot'}]},
        {"header": "rnr13", "dataIndex": "rnr13", "width": 50, filter: [{xtype:"textfield", style: 'text-align: right'}, {xtype:"textfield", style: 'text-align: right'}]},
        {"header": "datumlijst", "dataIndex": "datumlijst", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "datvan", "dataIndex": "datvan", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "dattot", "dataIndex": "dattot", "renderer": Ext.util.Format.dateRenderer('d-m-Y'), "width": 40, filter: [{xtype:"datefield", format:'d-m-Y'},{xtype:"datefield", format:'d-m-Y'}]},
        {"header": "waarde", "dataIndex": "waarde", "renderer": "Ext.util.Format.number", "width": 30, filter: [{xtype:"numberfield"},{xtype:"numberfield"}]}
      ]
    });

Can anybody give me a hint ?

Thanks !!

Peter

[mkraemer]

Thank you for your extension, d.zucconi.

To avoid that the normal background image of the grid header is stretched when using your extension, i quickly created a new image for the grid header. It looks ok with or without the filter fields enabled, maybe someone else can use it

Needed CSS:

/* Fix to avoid the normal 22px-height background image stretching to 48px height: */
.x-grid3-header {
    background-image: url('/images/grid3-hrow2-48.gif')!important;
    background-position: 0 top;
}

.x-ghf-filter-container .x-form-item{
    margin-bottom: 2px;
}

Needed image is attached.

Marius

[mshussein]

First up: I love this plugin.

When using Combos and Datefields as filters however, I cannot get them to 'clear'.

If I remove all the text in a datefield/combo filter field, and then modify another filter field, the filter text comes back for the datefield/combo. Once this happens, no matter what I do, i cannot get the filter to clear (unless of course I set the GridPanel stateful:false and I refresh).

Has anyone else experienced this in the past? How did you get around it?


Kindest regards,
mshussein.

Edit: using Ext 3.3.1 and GHF 2.0.3, so this may be an issue?

[mshussein]

Well,

I managed to work around this by changing this:

if(t=='combo' || t=='datefield'){ //avoid refresh twice for combo select 
  return;
}else{
  this.applyFilter(field);
}

to

if(t=='combo' || t=='datefield'){ //avoid refresh twice for combo select 
  this.applyFilter(field);
}else{
  this.applyFilter(field);
}

...inside the configure function (Changes were made around line 342).

I know it makes the if statement redundant, but it's easier to keep it like that so I can switch between the two.

Yet to find any issues with the change.

Regards,
mshussein.

[daddie888]

Found a workaround, here is the patch

renderFilterContainer: function(columnId, fcc)
  {
    if(!this.filterContainers)
      this.filterContainers = {};
    //Associated column index
    var ci = this.grid.getColumnModel().getIndexById(columnId);
    //Header TD
    var td = this.grid.getView().getHeaderCell(ci);
    td = Ext.get(td);
    //Patch for field text selection on Mozilla
    if(Ext.isGecko){
      td.dom.style.MozUserSelect = "text";
    }
    fcc.width = td.getWidth() - 3;
    td.dom.style.verticalAlign = 'top';
    //Render filter container
    
    var fc = new Ext.Container(fcc);
    fc.render(td);
    //Container cache
    this.filterContainers[columnId] = fc;
    //Fields cache
    var height = 0;
    if(!this.filterFields)
      this.filterFields = {};
    var fields = fc.findBy(function(cmp){return !Ext.isEmpty(cmp.filterName);});
    if(!Ext.isEmpty(fields))
    {
      for(var i=0;i<fields.length;i++)
      {
        var filterName = fields[i].filterName;
        this.filterFields[filterName] = fields[i];
        height += fields[i].getHeight();
        if(!Ext.isGecko){
          fields[i].setWidth(fcc.width); //for IE7
        }
      }
    }