因为有需求,所以需要通过输入,按照名称实时查找过滤表格数据,也就是键盘边输入边查找,如下图:
实现方法是通过给表格数据store设置filter的方法进行过滤,此方法官方例子也可以找到,
可以根据需要对对应列进行数据过滤查找。
页面代码如下:
Ext.define('setview.view.user.UpdateEventRuleWin', {
extend: 'Ext.window.Window',
requires: [
'setview.view.set.UserController',
'setview.view.set.UserModel'
],
controller:'userController',
viewModel:'userListModel',
closeAction:'hide',
width: 550,
height: 400,
initComponent: function() {
var me = this;
Ext.apply(this, {
items: [{
xtype: 'grid',
itemId:'ruleGridId',
store:Ext.create('Ext.data.Store',{
model: 'Ext.data.Model'
}),
columns: [{
text: '名称',
dataIndex: 'name',
width:'40%'
}, {
text: '适用终端',
dataIndex: 'pos',
width:'15%'
}, {
text: '屏蔽事件',
dataIndex: 'event',
width:'20%'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'textfield',
emptyText: '按名称查找',
width: '30%',
enableKeyEvents: true,
**itemId: 'queryFieldId',**
triggers: {
bar: {
cls: 'x-form-clear-trigger',//有输入时,后边出现一个清空X按钮
handler: function() {//点击清空按钮,textfield重置,即清空已输入的数据
this.reset();
me.getController().filterRule();
}
}
},
listeners: {
**keyup: {
fn: function(field, e) {
me.getController().filterRule(); //这里调用控制器的filterRule方法,方法也可以直接写此处
}
},**
buffer: 250
}
}, '->', {
xtype: 'button',
text: '添 加',
handler: function() {
me.getController().updateRule('add', null);
}
}, {
xtype: 'button',
text: '关 闭',
handler: function() {
this.up("window").close();
}
}]
}]
});
this.callParent();
}
})
添加一个textfield,监听其keyup事件,实现实时查找。
控制器里的filterRule方法:
/**
* 按名称查找过滤规则
*/
filterRule: function() {
var me = this,
view = me.getView(),
ruleGrid = view.queryById("ruleGridId"),
filterField = view.queryById("queryFieldId"),//查询的输入控件
filters = ruleGrid.store.getFilters();//当前表格的filter
if(filterField.value){//有输入值,添加filter
this.nameFilter = filters.add({
id:'nameField',
property:'name',//通过name属性过滤
value:filterField.value,//值为搜索框输入的值
anyMatch:true,//模糊匹配
caseSensitive:false
});
}else if(this.nameFilter){//未输入,则移除filter
filters.remove(this.nameFilter);
this.nameFilter = null;
}
}
如有不清楚,欢迎提问~