ExtJS模糊查询（二）

上篇文章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: '[e-mail]',
            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',

界面效果如下：