IconCombo

[jamone]

Can anyone figure out how to port the iconCombo example to ext 4.x?

I have attempted it, and I am encountering too many errors.

Thanks in advance
Cheers

[lukerahl]

The following seems to work just fine for me...

/**
  * Ext.ux.IconCombo Extension Class for Ext 4.x Library
  *
  * @author  Daniel Kuhnley
  * @class Ext.ux.IconCombo
  * @extends Ext.form.field.ComboBox
  */
Ext.define('Ext.ux.IconCombo',{
	extend:'Ext.form.field.ComboBox',
	alias:'widget.iconcombo',

    initComponent:function() {
	
        Ext.apply(this, {
			listConfig: {
				iconClsField:this.iconClsField,
				getInnerTpl: function() {
					return '<tpl for=".">'
						+ '<div class="x-combo-list-item ux-icon-combo-item '
						+ '{' +this.iconClsField+ '}">'
						+ '{' + this.displayField + '}'
						+ '</div></tpl>';
				},
				scope:this
			},
			scope:this
		});
 
        // call parent initComponent
		this.callParent(arguments);
 
    }, // end of function initComponent
 
    onRender:function(ct, position) {
        // call parent onRender
        this.callParent(arguments);
 
        // adjust styles
        this.bodyEl.applyStyles({position:'relative'});
        this.el.down('input.x-form-field').addCls('ux-icon-combo-input');
 
        // add div for icon
        this.icon = Ext.core.DomHelper.append(this.el.down('div.x-form-item-body'), {
            tag: 'div', style:'position:absolute'
        });
    }, // end of function onRender
 
    setIconCls:function() {
		var rec = this.store.findRecord(this.valueField, this.getValue());
		if(rec) {
			this.icon.className = 'ux-icon-combo-icon '+rec.get(this.iconClsField);
		}
    }, // end of function setIconCls
 
    setValue: function(value) {
        this.callParent(arguments);
        this.setIconCls();
    } // end of function setValue
});
// end of file

With css:

<style type="text/css">
    .ux-flag-us {
        background-image:url(images/us.png) ! important;
    }
    .ux-flag-de {
        background-image:url(images/de.png) ! important;
    }
    .ux-flag-fr {
        background-image:url(images/fr.png) ! important;
    }
    .ux-icon-combo-icon {
        background-repeat: no-repeat;
        background-position: 0 50%;
        width: 18px;
        height: 14px;
    }
 
    /* X-BROWSER-WARNING: this is not being honored by Safari */
    .ux-icon-combo-input {
        padding-left: 25px;
    }
 
    .x-form-item-body .ux-icon-combo-icon {
        top: 3px;
        left: 5px;
    }
    .ux-icon-combo-item {
        background-repeat: no-repeat ! important;
        background-position: 3px 50% ! important;
        padding-left: 24px ! important;
    }
    </style>

And example usage:

<script type="text/javascript">
    	Ext.require([
            'Ext.window.Window'
        ]);
        
		Ext.onReady(function() {
			Ext.create('Ext.Window', {
		        title: 'Icon Combo Ext 4.0 Extension Class Example',
		        width: 400,
		        height: 60,
		        x: 10,
		        y: 200,
		        plain: true,
		        layout: 'fit',
		        items: {
		            xtype:'iconcombo',
		            fieldLabel:'IconCombo',
		            store: new Ext.data.SimpleStore({
		                    fields: ['countryCode', 'countryName', 'countryFlag'],
		                    data: [
		                        ['US', 'United States', 'ux-flag-us'],
		                        ['DE', 'Germany', 'ux-flag-de'],
		                        ['FR', 'France', 'ux-flag-fr']
		                    ]
		            }),
		            valueField: 'countryCode',
		            displayField: 'countryName',
		            iconClsField: 'countryFlag',
		            triggerAction: 'all',
		            mode: 'local'
		        }
		    }).show();
		});
    </script>

[hschaefer123]

Hi Luke,
thankx for the nice migration.

One thing is missing. The originial plugin was always called after rendering (it was a plugin). Therefore if a combo ist instantiatedt hidden, setIconClass is called prior to render() -> error because no this.icon exists.

I modified the setIconClass a little bit to catch this trap:

    setIconCls: function() {
        if (this.rendered) {
            var rec = this.store.findRecord(this.valueField, this.getValue());
            if (rec) this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        } else {
            this.on('render', this.setIconCls, this, { single: true } );
        }
    }, // end of function setIconCls

Now the IconCombo works also on components that are instantiated hidden.

Cheers
Holger

[lukerahl]

@hschaefer123
Nice catch! Didn't think that one through all the way.

[asif.kilwani]

Hi Guys, thanks for sharing code. I've used the code but receiving "namespace is undefined"

I've put Ext.define('Ext.ux.IconCombo',{... code in IconCombo.js under ux folder

From my application I'm calling

requires: [
                'Ext.ux.IconCombo'
    ],

and the way to call combo

xtype:'IconCombo',
                                        fieldLabel:'IconCombo',
                                        store: new Ext.data.SimpleStore({
                                                        fields: ['countryCode', 'countryName', 'countryFlag'],
                                                        data: [
                                                                ['US', 'United States', 'ux-flag-us'],
                                                                ['DE', 'Germany', 'ux-flag-de'],
                                                                ['FR', 'France', 'ux-flag-fr']
                                                        ]
                                        }),
                                        valueField: 'countryCode',
                                        displayField: 'countryName',
                                        iconClsField: 'countryFlag',
                                        triggerAction: 'all',
                                        mode: 'local'

Not sure what line code is throwing "namespace is undefined"

[skirtle]

@asif.kilwani. Try switching your xtype to lower case.