Results 1 to 6 of 6

Thread: Trigger buttons on left

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2013
    Posts
    14

    Default Trigger buttons on left

    I have to show couple of buttons along with a textfield. I tried using triggers (Ext.form.trigger.Trigger) where I am able to add multiple buttons inside the field, By default, all the trigger buttons are placed on right side of field. Is there any way to add/position trigger buttons on left side of field (before the actual text). Also would it be possible to have triggers on both sides of the field?


    Configuration used for adding triggers:


    Code:
    Ext.create('Ext.form.Panel', {
    	title: 'Contact Info',
    	width: 300,
    	bodyPadding: 10,
    	renderTo: Ext.getBody(),
    	items: [{
    		xtype: 'textfield',
    		triggers:{
    			 picker1: {
    				 id:'lookupButton'			   
    			},
    			picker2: {
    				 id:'clearButton'				
    			}
    		}
    	}]
    });

  2. #2
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    The simpler way is to modify the CSS:
    Code:
    .custom{
        left: 0;position: absolute;margin-left: 11px;    
    }
    .custom2{
        margin-left:41px
    }
    
    Ext.create('Ext.form.Panel', {
                title: 'Contact Info',
                width: 300,
                bodyPadding: 10,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'textfield',
                    triggers: {
                        picker1: {
                            cls:"custom",
                            id: 'lookupButton'
                        },
                        picker2: {
                            cls:"custom custom2",
                            id: 'clearButton'
                        }
                    }
                }]
            });
    You can also change the order in which the pickers are displayed in the template with an override. See https://docs.sencha.com/extjs/6.0/6....rty-postSubTpl .. move the triggers loop to the preSubTpl or where ever you need.

  3. #3
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Unfortunately the posted code won't take into account the fieldLabel width (see Fiddle), and even if you do apply the appropriate position amount, the input text will be hidden behind these images. Sounds like playing with post and preSubTpl is the way to go.


  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Here is a version for 6.5.0 classic:

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Quote Originally Posted by MikeLowery View Post
    Just to point out this is for modern. Sadly, this doesn't look to be an option in classic as of 6.6.0 yet. Looks like my fiddle still works in 6.6.0 tho
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Similar Threads

  1. Trigger of PickerField on left side en ExtJS 5
    By christianb in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 13 May 2014, 3:57 AM
  2. Trigger of PickerField on left side
    By christianb in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 10 Dec 2013, 7:36 AM
  3. Trigger field with icon on the left
    By Christiand in forum Sencha Ext JS Q&A
    Replies: 2
    Last Post: 27 Feb 2013, 8:38 AM
  4. Combo trigger icon appearing on left of textfield
    By karnak in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 9 Oct 2012, 5:53 PM
  5. Ext.form.field.Trigger with 2 trigger buttons
    By maneljn in forum Ext: Discussion
    Replies: 1
    Last Post: 28 Jun 2011, 8:51 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •