TwinTriggerField

[mrlayeghi]

I need component Ext.form.TwinTriggerField but not in ext4 !

[Animal]

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

[mrlayeghi]

Thanks

[sucaritas]

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

Ext.app.SearchField = Ext.extend(Ext.form.field.Trigger,
{
    initComponent : function()
    {
        Ext.app.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e)
        {
            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?

[mrlayeghi]

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>',
                        {
                            compiled: true,
                            disableFormats: true
                        }
                    )
                })
            }]            
    }]

}).show(); 

[dogomatic]

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

[szolarp]

I created a FilterField based on previous comments:

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();
	}
});

Ext.create('Ext.grid.Panel', {
	dockedItems: [{
		xtype: 'toolbar',
		dock: 'top',
		items: [Ext.create('Ext.ux.form.FilterField', {emptyText: 'Search in the grid'})]
	}],
	...

[jkridla]

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

 hideTrigger1: true

doesn't work. I also need to dynamically hide/show the triggers, but I'm not having luck with that either. Thanks.

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();
    }
});

[xun]

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

[xun]

Specifically, how to hide a trigger in a TwinTriggerField?

hideTrigger1: true

does not work.

Thanks