1. #1
    Sencha User
    Join Date
    Oct 2009
    Location
    Tehran
    Posts
    16
    Vote Rating
    0
    mrlayeghi is on a distinguished road

      0  

    Default TwinTriggerField

    TwinTriggerField


    I need component Ext.form.TwinTriggerField but not in ext4 !
    Smile while others are frowning
    لبخند بزن وقتي که ديگران خشمگيند

    Your Life can be beautiful dreams
    زندگي شما مي تواند به زيبايي روياهايتان باشد

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      1  

    Default


    TriggerField can accept as many triggerNClass and onTriggerNClick configs as you like now.

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Location
    Tehran
    Posts
    16
    Vote Rating
    0
    mrlayeghi is on a distinguished road

      0  

    Default


    Thanks
    Smile while others are frowning
    لبخند بزن وقتي که ديگران خشمگيند

    Your Life can be beautiful dreams
    زندگي شما مي تواند به زيبايي روياهايتان باشد

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    8
    Vote Rating
    0
    sucaritas is on a distinguished road

      0  

    Default trigger field

    trigger field


    hello animal i am trying to create a search field with two buttons one for search and one to clear the search but i cant find the twintrigger field and found this post. but after playing with it i can get the second trigger to appear. here is what im trying to do
    PHP Code:
    Ext.app.SearchField Ext.extend(Ext.form.field.Trigger,
    {
        
    initComponent : function()
        {
            
    Ext.app.SearchField.superclass.initComponent.call(this);
            
    this.on('specialkey', function(fe)
            {
                if(
    e.getKey() == e.ENTER)
                {
                    
    this.onTrigger1Click();
                }
            }, 
    this);
        },

        
    validationEvent:false,
        
    validateOnBlur:false,
        
    trigger1Class:'x-form-clear-trigger',
        
    trigger2Class:'x-form-search-trigger',
        
    triggerCls:'x-form-search-trigger',
        
    hideTrigger1:false,
        
    hideTrigger2:false,
        
    width:180,
        
    hasSearch false,
        
    paramName 'query',

        
    onTrigger1Click : function()
        {
            
    this.store.filters.clear();
            
    this.store.filter('Search'this.getValue());
        },
        
    onTrigger2Click : function()
        {
            
    this.store.filters.clear();
            
    this.store.filter('Search'this.getValue());
        }
    }); 
    could you or someone else point me in the right direction?

  5. #5
    Sencha User
    Join Date
    Oct 2009
    Location
    Tehran
    Posts
    16
    Vote Rating
    0
    mrlayeghi is on a distinguished road

      0  

    Default


    PHP Code:
    var pnl = new Ext.panel.Panel({
        
    title 'Panel',
        
    width:350,
        
    height:400,
        
    frame:false,
        
    headerPosition 'top',
        
    collapsible:true,
        
    //html:'This Is Testing Ext 4.0',
        
    renderTo Ext.getBody(),
        
    //fullscreen: true,
        
    floating:true,
        
    layout:'fit',
        
    items : [{
            
    xtype :'tabpanel',
            
    tabPosition 'top',
            
    activeTab:1,
            
    plain:true,
            
    items: [{
                    
    title'Tab 1',
                    
    html'A simple tab',
                    
    closable true
                
    },{                    
                    
    title 'triggerField',
                    
    items Ext.createWidget('triggerfield',{
                        
    id:'trg',
                        
                        
    trigger1Cls ' '//x-form-arrow-trigger
                        
    trigger2Cls ' ',
                        
    trigger3Cls ' ',
                        
    trigger4Cls ' ',
                        
    onTrigger1Click : function(){alert('trigger1Click');},
                        
    onTrigger2Click : function(){alert('trigger2Click');},
                        
    onTrigger3Click : function(){alert('trigger3Click');},
                        
    onTrigger4Click : function(){alert('trigger4Click');},
                        
    fieldSubTpl : new Ext.XTemplate(
                            
    '<input id="{id}" type="{type}" ',
                                
    '<tpl if="name">name="{name}" </tpl>',
                                
    '<tpl if="size">size="{size}" </tpl>',
                                
    '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
                                
    'class="{fieldCls} {typeCls}" autocomplete="off" />',
                            
    '<div class="{triggerWrapCls}" role="presentation">{triggerEl}</div>',
                            {
                                
    compiledtrue,
                                
    disableFormatstrue
                            
    }
                        )
                    })
                }]            
        }]

    }).
    show(); 
    Smile while others are frowning
    لبخند بزن وقتي که ديگران خشمگيند

    Your Life can be beautiful dreams
    زندگي شما مي تواند به زيبايي روياهايتان باشد

  6. #6
    Ext JS Premium Member dogomatic's Avatar
    Join Date
    Aug 2007
    Location
    Canada
    Posts
    111
    Vote Rating
    1
    dogomatic is on a distinguished road

      0  

    Default


    I like this. This is cool. I used it to add an 'Add' button to come comboboxes. Just subclass ComboBox and add trigger2Cls and onTrigger2Click.

    This functionality was a bit hard to discover though :P

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    szolarp is on a distinguished road

      0  

    Default


    I created a FilterField based on previous comments:

    Code:
    Ext.ns('Ext.ux.form');
    
    Ext.define('Ext.ux.form.FilterField', {
        extend: 'Ext.form.field.Trigger',
    
        initComponent : function() { 
            Ext.ux.form.FilterField.superclass.initComponent.call(this); 
            this.on('specialkey', function(f, e) { 
                if(e.getKey() == e.ESC) { 
                    this.onTrigger1Click(); 
                } 
            }, this); 
    		
    		this.on('render', function (f) {
                    f.el.on('keydown', 
                        function (e) {
                            if (e.keyCode != 116 &&  e.keyCode != 27 && e.keyCode != 17 && e.keyCode != 16 && e.keyCode != 9 && e.keyCode != 18 && e.keyCode != 20 && (e.keyCode > 40 || e.keyCode < 33)) {
    		                    this.fField.onTrigger2Click();
                            }
                        },
                        this,
                        {buffer: 350}
                    );
                },
                {fField : this}
            );
        }, 
    
        validationEvent:false, 
        validateOnBlur:false, 
        trigger1Cls:'x-form-clear-trigger', 
        trigger2Cls:'x-form-search-trigger', 
        hideTrigger1:false, 
        hideTrigger2:false, 
        width:180, 
        hasSearch : false, 
        paramName : 'filterText', 
    
        onTrigger1Click : function() { 
            this.reset(); 
            this.filter(''); 
        },
    	
        onTrigger2Click : function() { 
            this.filter(this.getValue()); 
        },
    	
    	filter : function (text) {
    		this.getStore().proxy.extraParams[this.paramName] = text;
    		this.getStore().load();
    	},
    	
    	getGrid : function() {
    		return this.up('gridpanel');
    	},
    	
    	getStore : function() {
    		return this.getGrid().getStore();
    	}
    });
    Code:
    Ext.create('Ext.grid.Panel', {
    	dockedItems: [{
    		xtype: 'toolbar',
    		dock: 'top',
    		items: [Ext.create('Ext.ux.form.FilterField', {emptyText: 'Search in the grid'})]
    	}],
    	...

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    jkridla is on a distinguished road

      0  

    Default Hiding Triggers

    Hiding Triggers


    I am having a problem hiding triggers. I have two triggers for a search (one is an icon to click to search and the other is an icon to clear the search) I've had success implementing this in previous version of ExtJS, but this version isn't cooperating. Using the property
    Code:
     hideTrigger1: true
    doesn't work. I also need to dynamically hide/show the triggers, but I'm not having luck with that either. Thanks.

    Code:
    Ext.ns('Ext.ux.form');
    
    Ext.define('Ext.ux.form.SearchField', {
        extend: 'Ext.form.field.Trigger',
        alias: 'widget.searchtrigger',
    
    //Ext.ux.form.SearchField = Ext.extend(Ext.form.field.Trigger, {
        initComponent : function(){
            Ext.ux.form.SearchField.superclass.initComponent.call(this);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTrigger2Click();
                }
            }, this);
        },
        validationEvent:false,
        validateOnBlur:false,
        trigger1Cls:'x-form-clear-trigger',
        trigger2Cls:'x-form-search-trigger',
        hideTrigger1:true,
        width:180,
        hasSearch : false,
        paramName : 'query',
    
        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.triggers[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[0].show();
        }
    });

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

      0  

    Default


    Is there updates on TwinTriggerField? None of the above seems to be working as expected.

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

      0  

    Default


    Specifically, how to hide a trigger in a TwinTriggerField?

    hideTrigger1: true

    does not work.

    Thanks

Similar Threads

  1. TwinTriggerField
    By micky1984 in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 3 Jun 2010, 12:49 AM
  2. TwinTriggerField + css
    By AlainJS in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jul 2008, 1:48 AM
  3. Tooltip on TwinTriggerField
    By Jaaap in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 20 Jun 2008, 4:51 AM

Thread Participants: 8