Custom icon inside TextField

[squarefan]

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:

{
                                                    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!

[estesbubba]

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

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'
            }]
        }]
    }
    
});