Results 1 to 2 of 2

Thread: Custom icon inside TextField

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
      0  

    Default Custom icon inside TextField

    Hi@all,

    Is there a possiblity to add a custom icon to the textfield like the "clearIcon"?

    What I am trying to do is modify a textfield to look more in line like the list options in iOS. Basically I need a nested FormPanel element that when I click it I will slide to a different element. I know that this is possible via a button but I just don't like the style of that.

    It is fairly easy to get the event handler in place - so now the only thing that is missing is for me to add the icon (e.g. arrow to the right). Anyone figured out how to do this?

    here the code for the event listener in case somebody is interessted:

    Code:
    {
                                                        xtype: 'textfield',
                                                        labelWidth: '50%',
                                                        clearIcon: false,
                                                        readOnly: true,
                                                        label: 'Privacy Information',
                                                        listeners : {
                                                            element : 'element',
                                                            tap : function() {
                                                                console.log('tap');
                                                            }
                                                        }
                                                }
    I think it should be possible with tpl.. or renderTpl but I am not quite sure how to do this.

    thanks in advance!

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    625
    Vote Rating
    39
      0  

    Default

    We have what we call the "lawyer widget" which displays text with an ellipsis and icon to click to view all.

    Code:
    Ext.define('App.view.DisplayField', {
        
        extend: 'Ext.field.Field',
        xtype: 'displayField',
        
        config: {
            iconCls: 'search',
            cls: 'c-display-field',
            displayText: null,
            displayTextCls: 'c-display-text',
            wrapCls: 'c-wrap',
            showIcon: true,
            wrapText: false,
            component: {
                xtype: 'displayFieldComponent'
            }
        },
        
    
    
        initialize: function() {
            var me = this,
                comp = me.getComponent();
            
            me.callParent();
            
            if (this.getShowIcon()) {
                comp.iconElement.on({
                    scope: this,
                    tap: this.onMoreTap
                });
                comp.displayElement.on({
                    scope: this,
                    tap: this.onMoreTap
                });
            }
            
        },
        
        updateDisplayText: function(value) {
            var me = this,
                comp = me.getComponent();
                
            comp.displayElement.setHtml(value);
        },
        
        updateDisplayTextCls: function(newCls, oldCls) {
            var me = this,
                comp = me.getComponent();
            
            comp.displayElement.replaceCls(oldCls, newCls);
        },
        
        updateWrapText: function(value) {
            var me = this,
                comp = me.getComponent();
            
            if (value) {
                comp.displayElement.addCls(me.getWrapCls());
            }
            else {
                comp.displayElement.removeCls(me.getWrapCls());
            }
        },
        
        updateIconCls: function(newCls, oldCls) {
            var me = this,
                comp = me.getComponent();
            
            comp.imgElement.addCls('x-button-icon');
            comp.imgElement.replaceCls(oldCls, newCls);
            comp.imgElement.addCls('x-icon-mask');
        },
        
        updateShowIcon: function(value) {
            var me = this,
                comp = me.getComponent();
            
            comp.iconElement.setStyle('display', value ? 'block' : 'none');
        },
        
        onMoreTap: function() {
            if (!this.popup) {
                this.popup = new Ext.Panel({
                    modal: true,
                    hideOnMaskTap: true,
                    centered: true,
                    width: Ext.os.is.Phone ? '75%' : 400,
                    height: Ext.os.is.Phone ? '75%' : 400,
                    styleHtmlContent: true,
                    scrollable: 'vertical',
                    showAnimation: 'fadeIn',
                    hideAnimation: 'fadeOut',
                    html: this.getDisplayText()
                })
            }
            
            if (Ext.os.is.Phone) {
                if (!this.popup.getParent()) {
                    Ext.Viewport.add(this.popup);
                }
                this.popup.show();
            }
            else {
                this.popup.showBy(this.getComponent().iconElement);
            }
        }
        
    });
    
    
    Ext.define('App.view.DisplayFieldComponent', {
        
        extend: 'Ext.Component',
        xtype: 'displayFieldComponent',
        
        config: {
            cls: 'x-field-input'
        },
        
        getTemplate: function() {
            return [{
                reference: 'displayElement',
                cls: 'c-display-text',
                tag: 'div'
            }, {
                reference: 'iconElement',
                cls: 'x-button x-button-plain',
                children: [{
                    reference: 'imgElement',
                    tag: 'div'
                }]
            }]
        }
        
    });

Posting Permissions

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