1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    30
    Vote Rating
    0
    lafugacu78 is on a distinguished road

      0  

    Default Unanswered: set an icon to the left of the form field

    Unanswered: set an icon to the left of the form field


    plugins

    Code:
    Ext.define('myapp.plugins.fieldicon', {    
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.fieldicon',
            init: function (field) {
               this.field = field;
                field.rendered ?
                    this.createicon() :
                    field.on('afterrender', this.createicon, this);
                }
            },
            
            
            createicon: function(){
            var 
                 field= this.field;
                field.bodyEl.insertFirst({
                    tag: 'img',
                    src: field.iconsrc,
                    width: 20
                });
            }
            
    });
    use
    Code:
    .....
    {
                    xtype: 'datefield',
                    fieldLabel: 'Best Before',
                    plugins: ['fieldicon'],
                    iconsrc:'some img url',
                    value: new Date()
                    }
    ......
    how to make the image on the left of this field?
    note: must work with all types of fields

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    You could setup an hbox container to paint the image. Here is a quick example that used this approach to paint a button:
    http://ext4all.com/post/how-to-add-b...orm-field.html

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    30
    Vote Rating
    0
    lafugacu78 is on a distinguished road

      0  

    Default


    like that ?

    Code:
    Ext.define('myapp.plugin.fieldicon', {
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.fieldicon',
        init: function(field) {
            var
                    me = this;
            me.field = field;
    
    
            field.rendered ?
                    me.createIcon() :
                    field.on('afterrender', me.createIcon, me);
    
    
        },
        createIcon: function() {
            var
                    me = this,
                    field = me.field;
    
    
            var container = field.up();
    
    
            var index = container.items.findIndex('id', field.id);
    
    
            var fieldcontainer = new Ext.form.FieldContainer({
                xtype: 'fieldcontainer',
                layout: {type: 'hbox', align: 'middle'}
            });
    
    
            Ext.isEmpty(field.width) && Ext.apply(fieldcontainer, {flex: 1});
    
    
    
    
            var icon = new Ext.Img({
                cls: 'ticket-form-incon',
                src: field.iconsrc
            });
    
    
    
    
    
    
            fieldcontainer.add(icon);
            fieldcontainer.add(field);
    
    
            container.insert(index, fieldcontainer);
    
    
            if (!Ext.isEmpty(field.icontip)) {
                icon.on('afterrender', function() {
                    new Ext.tip.ToolTip({
                        target: icon.getEl(),
                        html: '<div>' + field.icontip + '</div>'
                    });
                });
            }
        }
    });

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,536
    Answers
    485
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Is this what you want: Form Field Icon Plugin?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


Thread Participants: 2