ExtJS를 처음 사용합니다. 그리드에서 필터링을 적용하기위한 코드를 작성했지만 제대로 작동하지 않습니다. 필터링 적용을 위해 작성한 코드 스 니펫 첨부. 필터가 없으면 그리드가 패널에 올바르게 표시됩니다.Extjs 필터링이 제대로 작동하지 않습니다.
Ext.create('Ext.data.Store', {
storeId: 'userDetailsStore',
fields: ['username', 'firstname', 'lastname', 'role', 'activeuser'],
data: {'items': [
{"username": 'USER1', "USER1-firstname": "firstname", "lastname": "USER1-lastname",
"role": 'Admin', "activeuser": 'Y'},
{"username": 'USER2', "firstname": "USER2-firstname", "lastname": "USER2-lastname",
"role": 'Type1', "activeuser": 'Y'},
{"username": 'USER3', "firstname": "USER3-firstname", "lastname": "USER3-lastname",
"role": 'Type2', "activeuser": 'Y'},
{"username": 'USER4', "firstname": "USER4-firstname", "lastname": "USER4-lastname",
"role": 'Type3', "activeuser": 'Y'},
{"username": 'USER5', "firstname": "USER5-firstname", "lastname": "USER5-lastname",
"role": 'Admin', "activeuser": 'Y'},
{"username": 'USER6', "firstname": "USER6-firstname", "lastname": "USER6-lastname",
"role": 'Type4', "activeuser": 'Y'}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var filters = Ext.create('Ext.ux.grid.FiltersFeature',
{
// ftype: 'filters',
encode: false,
autoReload: false,
local: true,
filters: [{
type: 'string',
dataIndex: 'username'
}, {
type: 'string',
dataIndex: 'firstname',
disabled: true
}, {
type: 'string',
dataIndex: 'lastname'
}, {
type: 'list',
dataIndex: 'role',
options: ['Admin', 'Type1', 'Type2', 'Type3', 'Type4'],
phpMode: true
}, {
type: 'string',
dataIndex: 'activeuser'
}]
};
var user_view_grid = new Ext.create('Ext.grid.Panel', {
title: 'User Details',
border: false,
align: 'stretch',
store: Ext.data.StoreManager.lookup('userDetailsStore'),
loadMask: true,
features: [filters],
bbar: Ext.create('Ext.toolbar.Paging', {
store: Ext.data.StoreManager.lookup('userDetailsStore')
}),
columns: [
{header: 'Username', dataIndex: 'username', flex: 1},
{header: 'FirstName', dataIndex: 'firstname', flex: 1},
{header: 'LastName', dataIndex: 'lastname', flex: 1},
{header: 'Role', dataIndex: 'role', flex: 1},
{header: 'ActiveUser', dataIndex: 'activeuser', align: 'center'}
],
height: 200
});
var user_view_panel = new Ext.Panel({
region: 'north',
margins: '2 0 0 0',
cmargins: '5 5 0 0',
height: 200,
split: true,
collapsible: false,
border: true,
xtype: 'panel',
bodyStyle:
{
"background-color": "#F8F8F8",
"padding-left": "5px",
"padding-right": "5px",
"padding-bottom": "5px"
},
items: [
user_view_grid
]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [
{
collapsible: false,
region: 'center',
title: 'User Management',
bodyStyle: {"background-color": "#F8F8F8"},
layout: {
type: 'border',
align: 'stretch'
},
items: [
user_view_panel
]
}
]
}],
renderTo: Ext.getBody()
});
것은 내가 extjs라는-4.2.2 브라우저 콘솔에서
당신이 4.2.2을 사용하는 경우 4.1과 5로 질문에 태그를 붙인 이유는 무엇입니까? –