版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
上篇文章ExtJS6.0和后台交互:https://blog.csdn.net/mianxing2357/article/details/88355685
在原有的基础上,进行模糊查询,
在user.js中的gridpanel-》item-》tbar,里面包含查询条件和提交按钮,
tbar: [
{
xtype: "textfield",
maxWidth: 205,
fieldLabel: "角色编号",
name:'userId',
reference:'userId',
labelWidth: 60
},
{
xtype: "textfield",
maxWidth: 205,
fieldLabel: "角色名称",
name:'userName',
reference:'userName',
labelWidth: 60
}, {
xtype: "button",
text: "搜索",
glyph: 'xf002@FontAwesome',
handler: "search"
}],
由于有事件,需要创建controller写方法逻辑
Ext.define("Admin.view.user.userController", {
extend: "Ext.app.ViewController",
alias: "controller.user",
//搜索
search: function () {
var id = this.getView().lookupReference('userId').getValue();
//用这个方法你能根据id获取到value值,还有其他方法可以获取文本框的值,有简单的还请路过的伙伴说一下
var userName = this.getView().lookupReference('userName').getValue();
var myStore = Ext.getCmp("userGrid").getStore();
myStore.load({ params: { 'userId': id, 'userName': userName } });//带条件加载数据源
myStore.on("beforeload", function () {
Ext.apply(myStore.proxy.extraParams, { 'userId': id, 'userName': userName });
});//分页,跳转时带参数跳转,不加则会查询所有
Ext.getCmp("userGrid").setStore(myStore);//获取grid实例,把数据塞回去
},
});
在user.js中引入userController
requires: [
// 当引用其他js时,加入依赖,如controller,viewModel等
'Admin.view.user.userController'
],
controller:'user',
界面效果如下: