필터가 그리드에 표시되지 않습니다.

Question

필터를 내 표에 적용하려고했지만이를 수행 할 수 없습니다. Extjs에 익숙하지 않아서 해결하도록 도와주세요.

내가 이것을 실행 엽차 바이올린을 사용하고 난 그리드에 필터를 impement하는 로 "기능 : [필터]"시도 할 때

이 또한

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' 
}] 
}; 

을 바라하시기 바랍니다 // 그리드

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

extjs 6 버전을 사용하는 경우 아래 코드가 유용합니다. 필터를 표시하려면 그리드에 'gridfilters'플러그인을 제공해야합니다.

VAR 그리드 = Ext.create ('Ext.grid.Panel', { 제목 : 'Employee 테이블', stripRows : 사실, columnLines : 사실, 가기 : Ext.data.StoreManager.lookup (' employeeStore '), 폭 :'100 % ', 플러그인 :.'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' 
       } 
       } 
      ] 
    }); 

실행 예 Grid Filters