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
    10
    Vote Rating
    0
    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
    0
    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar