Extjs 解决MVC中 Ext.ux.SearchField 的问题

最新推荐文章于 2026-05-22 15:02:53 发布

原创最新推荐文章于 2026-05-22 15:02:53 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

Extjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个自定义的ExtJS搜索字段组件，该组件通过触发器实现清除与搜索功能，并能够根据输入值自动更新后端请求参数，实现动态搜索。

Ext.define('Ext.ux.SearchField', {
    extend: 'Ext.form.field.Trigger',

    alias: 'widget.searchfield',

    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',

    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    hasSearch : false,
    paramName : 'query',

    initComponent: function() {
        var me = this;
            
        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onTrigger2Click();
            }
            if (e.getKey() == e.TAB) {
                me.onTrigger1Click();
            }
        });
        me.on('blur', function (f) {
            var url = me.up('panel').store.proxy.api.read;
            if (url.indexOf(me.paramName) > 0)
                me.setValue(url.split('=')[1]);
            else
                me.setValue('');
        });
        me.on('afterrender', function (f) {
            var url = me.up('panel').store.proxy.api.read;
            if (url.indexOf(me.paramName) > 0) {
                me.setValue(url.split('=')[1]);
                me.hasSearch = true;
                me.triggerCell.item(0).setDisplayed(true);
                me.updateLayout();
            }
        });
    },

    afterRender: function(){
        this.callParent();
        this.triggerCell.item(0).setDisplayed(false);
    },

    onTrigger1Click : function(){
        var me = this,
            value = me.getValue(),
            store = me.up('panel').store;
        if (store.proxy.api.read.indexOf(me.paramName) > 0) {
            store.proxy.api.read = store.proxy.api.read.split('?')[0];
            store.reload();
        }
        if (me.hasSearch) {
            me.setValue('');
            me.hasSearch = false;
            me.triggerCell.item(0).setDisplayed(false);
            me.updateLayout();
        }
    },

    onTrigger2Click : function(){
        var me = this,
            value = me.getValue(),
            store = me.up('panel').store;
        
        if (value.length > 0) {            
            if (store.proxy.api.read.indexOf(me.paramName) < 0) {
                store.proxy.api.read += '?' + me.paramName + '=' + value;
            }
            else {
                store.proxy.api.read = store.proxy.api.read.split('=')[0] + '=' + value;
            }
            store.reload();
            me.hasSearch = true;
            me.triggerCell.item(0).setDisplayed(true);
            me.updateLayout();
        } else {
            if (store.proxy.api.read.indexOf(me.paramName) > 0) {
                store.proxy.api.read = store.proxy.api.read.split('?')[0];
                store.reload();
            }
            me.hasSearch = false;
            me.triggerCell.item(0).setDisplayed(false);
            me.updateLayout();
        }
    }
});