Filter werden nicht im Raster angezeigt

Question

Ich versuche Filter in meinem Raster zu implimentieren, aber ich kann es nicht tun. Bitte helfen Sie mir, es zu lösen, da ich Extjs neu bin.

ich sencha Geige bin mit dieser laufen und wenn ich versuchte Filter in Raster impement als "Eigenschaften: [Filter]"

dieser auch schauen Sie bitte

Ext.require([ 
'Ext.grid.*', 
'Ext.data.*', 
'Ext.ux.grid.FiltersFeature', 
'Ext.toolbar.Paging']); 

filters = { 
    ftype: 'filters', 
    encode: encode, 
    local: local, 

    filters: [{ 
    type: 'numeric', 
    dataIndex: 'Id' 
}, { 
    type: 'string', 
    dataIndex: 'fname' 
}, { 
    type: 'string', 
    dataIndex: 'lname' 
}, { 
    type: 'date', 
    dataIndex: 'date' 
},{ 
    type: 'numeric', 
    dataIndex: 'age' 
},/*{ 
    type: 'string', 
    dataIndex: 'genderId' 
}*/,{ 
    type: 'string', 
    dataIndex: 'email' 
},{ 
    type: 'numeric', 
    dataIndex: 'phone' 
}] 
}; 

// Gitter

title  : 'Employee table', 
       xtype  : 'grid', 
       stripRows : true, 
       columnLines : true, 
       store  : Ext.data.StoreManager.lookup('employeeStore'), 
       width  :'100%', 
       features : [filters] 


columns: 
       [ 
        { 
        header : 'ID', dataIndex: 'Id', flex:0.5 ,filterable: true, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'First Name', dataIndex: 'fname', flex:1 ,sortable : false,filterable: true, 
        filter: 
        { 
         type: 'string' 
        }, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
       }, 
        { 
        header : 'Last Name', dataIndex: 'lname', flex:1,filterable: true, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'DOB', dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
       }, 
        { 
        header : 'Gender', dataIndex: 'genderId', flex:0.5, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'Age', dataIndex: 'age', flex:0.5,filterable: true, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'Country', dataIndex: 'country', flex:1, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'Email', dataIndex: 'email', flex:2,filterable: true, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        }, 
        { 
        header : 'Phone', dataIndex: 'phone', flex:1,filterable: true, 
        editor: 
        { 
         xtype: 'textfield', 
         allowBlank: false 
        } 
        } 
       ], 

Answer 1

Wenn Sie extjs 6 Version verwenden, dann ist unten Code für Sie nützlich. Sie müssen dem Raster "gridfilters" ein Plugin geben, um die Filter anzuzeigen.

var grid = Ext.create ('Ext.grid.Panel', { Titel: 'Employee-Tabelle' stripRows: true, columnLines: true, store: Ext.data.StoreManager.lookup (‘ employeeStore '), Breite:' 100%‘, Plugins. [ 'gridfilters'],

 columns: 
      [ 
       { 
       header : 'ID', dataIndex: 'Id', flex:0.5 ,filterable: true, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
       filter: 
       { 
        type: 'numeric' 
       } 
       }, 
       { 
       header : 'First Name', dataIndex: 'fname', flex:1 ,sortable : false,filterable: true, 
       filter: 
       { 
        type: 'string' 
       }, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       } 
      }, 
       { 
       header : 'Last Name', dataIndex: 'lname', flex:1,filterable: true, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
      filter: 
       { 
        type: 'string' 
       } 
       }, 
       { 
       header : 'DOB', dataIndex: 'date', flex:1,filterable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'date' 
       } 

      }, 
       { 
       header : 'Gender', dataIndex: 'genderId', flex:0.5, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'string' 
       } 
       }, 
       { 
       header : 'Age', dataIndex: 'age', flex:0.5,filterable: true, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'numeric' 
       } 
       }, 
       { 
       header : 'Country', dataIndex: 'country', flex:1, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'numeric' 
       } 
       }, 
       { 
       header : 'Email', dataIndex: 'email', flex:2,filterable: true, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'string' 
       } 
       }, 
       { 
       header : 'Phone', dataIndex: 'phone', flex:1,filterable: true, 
       editor: 
       { 
        xtype: 'textfield', 
        allowBlank: false 
       }, 
     filter: 
       { 
        type: 'numeric' 
       } 
       } 
      ] 
    }); 

Lauf Beispiel auf Link ist Grid Filters