1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    209
    Vote Rating
    4
    squarefan is on a distinguished road

      0  

    Default Custom icon inside TextField

    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
    529
    Vote Rating
    17
    estesbubba will become famous soon enough

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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar