1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default TwinTriggerField hide trigger

    TwinTriggerField hide trigger


    hi, I have custom component that extends from 'Ext.form.field.Trigger'.

    Code as following

    Code:
    Ext.define('Ext.ux.SearchTwinTriggerField',{
    
    
        extend: 'Ext.form.field.Trigger',
    
    
        initComponent: function () {
            this.callParent();
            this.on('specialkey', function (f, e) {
                if (e.getKey() == e.ESC) {
                    this.onTrigger1Click();
                }
            }, this);
    
    
            
       },
    
    
        validationEvent: false,
        validateOnBlur: false,
        trigger1Cls: 'x-form-clear-trigger',
        trigger2Cls: 'x-form-search-trigger',
        hideTrigger1: true,
       
        width: 180,
        hasSearch: false,
        paramName: 'search',
        params: {},
       
        onTrigger1Click: function () {
    
    
            if (this.hasSearch) {
                Ext.Function.defer(this.setValue, 1, this, ['']);
                var o = { start: 0 };
                this.store.baseParams = this.store.baseParams || {};
                this.store.baseParams[this.paramName] = '';
                this.store.proxy.params = o;
                this.store.load();
                this.triggerEl.item(0).hide();
                this.hasSearch = false;
            }
        },
        onTrigger2Click: function () {
            var v = this.getRawValue();
            if (v.length < 1) {
                this.onTrigger1Click();
                return;
            }
            var o = { start: 0 };
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = v;
            this.store.proxy.params = o;
            this.store.load();
            this.hasSearch = true;
            this.triggerEl.item(0).show();
        }
    });

    I have trouble to hide the 1st trigger on initial rendering.

    Also based on some event, I would like show / hide the first trigger. The hide trigger works, however it leaves an empty space there and makes the control look ugly.

    Can someone help out? thanks

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    84
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    showATrigger: function(whichTrigger) { var theCell = this.triggerEl.item(whichTrigger).up('td'); theCell.setDisplayed('block'); }
    I do not understand why I cannot reply to the thread quoted above. Anyway, yes, the hide part works, but the show somehow does not make any difference

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    The showATrigger() function should be as below

    showATrigger: function(whichTrigger) { var theCell = this.triggerEl.item(whichTrigger).up('td'); theCell.setDisplayed(''); }

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    84
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    I had made some changes locally since my last post to that thread. I just posted the code that I've been using for a while now.

Thread Participants: 1