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
    12
    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
    12
    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,585
    Vote Rating
    320
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi