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
    10
    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
    10
    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,509
    Vote Rating
    288
    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.

  7. #7
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Location
    Bangalore, India
    Posts
    121
    Vote Rating
    24
    sumit.madan has a spectacular aura about sumit.madan has a spectacular aura about

      1  

    Default


    IconCombo extension for ExtJS 4.1 beta 1:
    Code:
    Ext.define('Ext.ux.form.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>';
                    }
                },
                fieldSubTpl: [
                    '<div class="{hiddenDataCls}" role="presentation"></div>',
                    '<div class="ux-icon-combo-wrap"><input id="{id}" type="{type}" {inputAttrTpl}',
                        '<tpl if="value"> value="{value}"</tpl>',
                        '<tpl if="name"> name="{name}"</tpl>',
                        '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
                        '<tpl if="size"> size="{size}"</tpl>',
                        '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
                        '<tpl if="readOnly"> readonly="readonly"</tpl>',
                        '<tpl if="disabled"> disabled="disabled"</tpl>',
                        '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
                        '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
                        'class="{fieldCls} {typeCls}" autocomplete="off" /></div>',
                    {
                        compiled: true,
                        disableFormats: true
                    }
                ]
            });
     
            // call parent initComponent
            this.callParent(arguments);
     
        }, // end of function initComponent
     
        onRender:function(ct, position) {
            // call parent onRender
            this.callParent(arguments);
     
            // adjust styles
            this.el.down('div[class=ux-icon-combo-wrap]').applyStyles({position:'relative'});
            this.el.down('input').addCls('ux-icon-combo-input');
     
            // add div for icon
            this.icon = Ext.core.DomHelper.append(this.el.down('div[class=ux-icon-combo-wrap]'), {
                tag: 'div', style:'position:absolute'
            })
        }, // end of function onRender
     
        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
     
        setValue: function(value) {
            this.callParent(arguments);
            this.setIconCls();
        } // end of function setValue
    });

  8. #8
    Ext JS Premium Member
    Join Date
    May 2012
    Posts
    4
    Vote Rating
    0
    rlovelett is on a distinguished road

      0  

    Default


    Made a gist of these. If anyone wants one.

    https://gist.github.com/3078460

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

      1  

    Default


    Currently investigating some time to move my ext 3.x to 4.1.x.

    I have rewriten the extension to be more compatibel for further updates (hopefully) using standard templates and renderSelectors.

    Screenshot:
    Attachment 0IconCombo.png

    Update: 2012/08/01

    Code:
    /**
      * Ext.ux.form.field.IconCombo Extension Class for Ext 4.1.x Library
      *
      * @author  Holger Schäfer
      * @class Ext.ux.IconCombo
      * @extends Ext.form.field.ComboBox
      * 
      * depends on IconLoader
      * Forum: http://www.sencha.com/forum/showthread.php?234135-Ext.ux.IconLoader
      * 
      * Usage:
      * {
      *     xtype: 'iconcombo',
      *     valueField: 'field1',
      *     displayField: 'field2',
      *     iconClsField: 'field3',
      *     queryMode: 'local',
      *     store: [['de', 'Deutsch', 'flags-de'], ['en','Englisch','flags-gb']]
      * }
      */
    
    Ext.define('Ext.ux.form.field.IconCombo', {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.iconcombo',    
        
        // sof IconLoader (comment this if not using IconLoader and load icons inside css) 
        uses: [ 'Ext.ux.IconLoader' ],
        requireIcons: ['flags/de', 'flags/gb'],
        // eof IconLoader
        
        initComponent: function() {    
            var me = this;
            
            // add container at the end of default template
            var iconFieldSubTpl = Ext.clone(me.fieldSubTpl);
            iconFieldSubTpl.push(
                '<div class="ux-icon-combo-icon"></div>'
            );
            
            Ext.apply(me, {
              scope: me,
              tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                     '<div class="x-boundlist-item ux-icon-combo-item {' + me.iconClsField + '}">',
                     '{' + me.displayField + '}',
                     '</div>',
                '</tpl>',
                 { compiled: true, disableFormats: true }
              ),
              // add wrapping DIV container around TDs because position:relative is not defined on TD 
              beforeSubTpl: '<div class="ux-icon-combo-wrap">',
              fieldSubTpl: iconFieldSubTpl,          
              afterSubTpl: '</div>',
              renderSelectors: {
                  iconClsEl: '.ux-icon-combo-icon'
              }
            });        
            
            me.callParent(arguments);    
      },
        
      setIconCls: function() {
          if (this.rendered) {        
              var rec = this.store.findRecord(this.valueField, this.getValue());
              if (rec) {
                  var newIconCls = rec.get(this.iconClsField);
                  this.iconClsEl.replaceCls(this.oldIconCls, newIconCls);
                  this.oldIconCls = newIconCls;
              }
          } else {
              this.on('render', this.setIconCls, this, {
                  single: true
              });
          }
      },
      
      setValue: function(value) {
          this.callParent(arguments);
          this.setIconCls();
      }     
    });
    and the corresponding CSS

    Code:
    .ux-icon-combo-wrap {
        position: relative;
    }
    
    .ux-icon-combo-wrap .x-form-field {
        padding-left: 25px;
    }
    
    .ux-icon-combo-icon {
        position: absolute;
        top: 4px;
        left: 5px;    
        background-repeat: no-repeat;
        background-position: 0 50%;
        width: 18px;
        height: 14px;
    }
    
    /*
    .ux-icon-combo-icononly {    
        color: transparent;
    }
    
    
    .ux-icon-combo-icononly .ux-icon-combo-input {
        padding-left: 1px;
        color: transparent;
    }
    */
    
    /* combo selection list */
    .ux-icon-combo-item {
        padding-left: 24px;
        background-repeat: no-repeat;
        background-position: 3px 50%;    
    }
    
    /* SUPPORTED FLAGS  (uncomment this if not using iconLoader) */
    /*
    .flags-de { background-image: url(/icons/flags/de.png); }
    .flags-gb { background-image: url(/icons/flags/gb.png); }
    */
    Maybe someone likes the update.

    Cheers Holger
    Attached Images

  10. #10
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      0  

    Default


    Hello!

    Thanks for the update, I'll try today...

    Just a remark : I guess, if you're using XTemplate, you didn't have to add "compiled:true" : http://docs.sencha.com/ext-js/4-1/#!...e-cfg-compiled

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