用写一个extjs6 实现模糊查询的完整例子

以下是一个简单的ExtJS 6模糊查询的例子：

1. 创建一个包含一个文本框和一个按钮的视图：

Ext.define('MyApp.view.Main', {
extend: 'Ext.panel.Panel',
xtype: 'main',

title: 'My Application',
width: 400,
bodyPadding: 10,

items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank: false
}, {
xtype: 'button',
text: 'Search',
handler: 'onSearchClick'
}]
});

2. 创建一个控制器，在按钮点击时执行模糊查询：

Ext.define('MyApp.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',

onSearchClick: function() {
var name = this.lookupReference('name').getValue();
var store = this.getViewModel().getStore('users');
store.clearFilter();
store.filter('name', name);
}
});

3. 创建一个模型和一个存储，用于保存用户数据：

Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',

fields: ['id', 'name', 'email']
});

Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',

alias: 'store.users',

model: 'MyApp.model.User',

data: [{
id: 1,
name: 'John Smith',
email: 'john.smith@example.com'
}, {
id: 2,
name: 'Jane Doe',
email: 'jane.doe@example.com'
}, {
id: 3,
name: 'Bob Johnson',
email: 'bob.johnson@example.com'
}]
});

4. 创建一个视图模型，将存储添加到视图模型中：

Ext.define('MyApp.view.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',

stores: {
users: {
type: 'users'
}
}
});

5. 将视图、控制器和视图模型组合在一起：

Ext.application({
name: 'MyApp',

launch: function() {
Ext.create('MyApp.view.Main', {
renderTo: Ext.getBody()
});
}
});

这个例子中的搜索功能将从“users”存储中筛选出名字包含文本框中输入的值的用户。这个例子可以轻松地扩展以实现更复杂的模糊查询。