Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    59
    Vote Rating
    0
    jamone is on a distinguished road

      0  

    Default IconCombo

    IconCombo


    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

  2. #2
    Ext JS Premium Member lukerahl's Avatar
    Join Date
    Nov 2007
    Location
    New Mexico, USA
    Posts
    23
    Vote Rating
    1
    lukerahl is on a distinguished road

      0  

    Default


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

    Code:
    /**
      * 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:
    Code:
    <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:
    Code:
    <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>
    Last edited by lukerahl; 29 Apr 2011 at 3:06 PM. Reason: Added css and example code

  3. #3
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    12
    hschaefer123 will become famous soon enough

      0  

    Default


    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:

    Code:
        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

  4. #4
    Ext JS Premium Member lukerahl's Avatar
    Join Date
    Nov 2007
    Location
    New Mexico, USA
    Posts
    23
    Vote Rating
    1
    lukerahl is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    3
    Vote Rating
    0
    asif.kilwani is on a distinguished road

      0  

    Default Getting error

    Getting error


    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
    Code:
    requires: [
                    'Ext.ux.IconCombo'
        ],
    and the way to call combo
    Code:
    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"

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

Similar Threads

  1. IconCombo
    By jamone in forum Ext 2.x: Help & Discussion
    Replies: 39
    Last Post: 14 Apr 2011, 4:50 AM
  2. IconCombo in a Grid
    By zombeerose in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 6 Apr 2010, 12:04 PM
  3. IconCombo in a Form
    By jamone in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 5 Nov 2009, 3:21 AM
  4. Ext.ux.IconCombo
    By vtswingkid in forum Ext 1.x: User Extensions and Plugins
    Replies: 1
    Last Post: 4 May 2008, 1:30 PM

Thread Participants: 11