ux's SearchField ported to Designer

FWIW, I ported ux's SearchField to Designer.

In reallity was very easy, almost copy/paste but a strange thing happened to me:

I added a custom property called "store" to the component and after that the component disappeared from screen. I have to change the property from store to storeId and thats it.

This is the code of defined component:

Code:

---

Ext.define('AG.view.comp.SearchField', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.searchfield',


    trigger1Cls: 'x-form-clear-trigger',
    trigger2Cls: 'x-form-search-trigger',
    paramName: 'query',
    storeId: '',


    initComponent: function() {
        var me = this;


        me.callParent(arguments);
    }
});

---

Note the custom properties triggerCls1/2, paramName and storeId. Appart from that is just a trigger field. BTW, Designer renders trigger fields with several buttons ok:

Attachment 32608

And this is the override:

Code:

---

Ext.define('AG.view.override.comp.SearchField', {
    requires: 'AG.view.comp.SearchField'
}, function() {
    Ext.override(AG.view.comp.SearchField, {
        hasSearch : false,
        initComponent: function() {
            this.callParent(arguments);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTrigger2Click();
                }
            }, this);
        },
   
        afterRender: function(){
            this.callParent();
            this.triggerEl.item(0).setDisplayed('none'); 
        },
       
        getStore: function() {
            var me = this;
            if (!me.store) {
                me.store = Ext.data.StoreManager.lookup(me.storeId);
            }
            return me.store;
        },
       
        onTrigger1Click : function(){
            var me = this,
                store = me.getStore(),
                proxy = store.getProxy(),
                val;
               
            if (me.hasSearch) {
                me.setValue('');
                proxy.extraParams[me.paramName] = '';
                proxy.extraParams.start = 0;
                store.load();
                me.hasSearch = false;
                me.triggerEl.item(0).setDisplayed('none');
                me.doComponentLayout();
            }
        },
   
        onTrigger2Click : function(){
            var me = this,
                store = me.getStore(),
                proxy = store.getProxy(),
                value = me.getValue();
               
            if (value.length < 1) {
                me.onTrigger1Click();
                return;
            }
            proxy.extraParams[me.paramName] = value;
            proxy.extraParams.start = 0;
            store.load();
            me.hasSearch = true;
            me.triggerEl.item(0).setDisplayed('block');
            me.doComponentLayout();
        }
    });
});

---

Is almost a copy/paste of ux's SearchField but with the new method is getStore() and slightly modified click methods.

Hope this helps somebody else.

Regards.