1. #11
    Sencha User dekely's Avatar
    Join Date
    Aug 2008
    Posts
    215
    Vote Rating
    3
    dekely is on a distinguished road

      0  

    Default


    How do I use IcojnCombo with dynamic image url?
    I get a list of urls of images from server, how can I populate combobox with it?

    Dekel
    Best regards,
    Dekel.y
    http://www.puzzlescramble.com

  2. #12
    Sencha User
    Join Date
    Mar 2011
    Posts
    26
    Vote Rating
    3
    FanOfExt is on a distinguished road

      0  

    Default


    I'd like to know as well. I tried http://www.sencha.com/forum/showthre...ges-in-ExtJS-4, but my icons never show up, just the broken image symbol appears!

  3. #13
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    0
    adwebtiser is on a distinguished road

      0  

    Default 4.2 Compatibility

    4.2 Compatibility


    Hi there,

    I am using 4.2.0 but I have not been able to get this working, it keeps coming with the TypeError: el is null.

    Is there any chance of checking this with 4.2?

    Thank you.

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

      0  

    Default


    Have a look into the examples!
    \examples\calendar\src\form\field\CalenderCombo.js
    is basically an icon combo.

    For next project i will use this as a base for IconCombo.

    Cheers Holger

  5. #15
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    0
    adwebtiser is on a distinguished road

      0  

    Default


    Thank you very much for the fast reply.

    Sorry for my ignorance. I am really new to Ext JS any pointers as to why I would get a TypeError? Like what would usually be the cause, so I can look into that section of Calendar js file and compare.

    It looks like for 4.1.1 it got the same error but it got fixed by just changing the top define name from Ext.ux.IconCombo to Ext.ux.form.field.IconCombo but this doesn't change anything for 4.2, I assume this is more than just changing one line of code. but if you could point me in the right direction I would really appreciate it.

    Thanks

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

      1  

    Default


    The component "Ext.calendar.form.field.CalendarCombo" is something like a special IconCombo version references app specific details. Copy the class into your own ux component starting by replacing Ext.calendar.form.field.CalendarCombo through Ext.form.field.IconCombo.

    Remove redundant refs to "Ext.calendar.data.CalendarMappings"

    Currently the class holds color names as icon to show state of surrounding form.

    Change icon classes to matching icon classes from origin icon.combo.

    This is maybe not quitre simple for an ext js newbie, but maybe this hints can help you.

    Cheers Holger

  7. #17
    Sencha User
    Join Date
    Apr 2013
    Posts
    4
    Vote Rating
    0
    adwebtiser is on a distinguished road

      0  

    Default


    Hi again,

    I know it took me a while but I did what you suggested and managed to get it working partly. But I am having problem with what is returned to the setValue function inside my iconcombo class.

    Here is my version of iconcombo:

    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',
        
        fieldLabel: 'Language',
        triggerAction: 'all',
        queryMode: 'local',
        forceSelection: true,
        //selectOnFocus: true,
        
        // private
        defaultCls: 'ux-icon-combo-icon ',
    
        initComponent:function() {
        
            this.listConfig = Ext.apply(this.listConfig || {}, {
                            iconClsField:  this.iconClsField,
                            defaultCls: this.getStyleClass(this.value),
                getInnerTpl: this.getListItemTpl
            });
     
            // call parent initComponent
            this.callParent(arguments);
     
        }, // end of function initComponent
            
        // private
        getListItemTpl: function(displayField) {
                        return '<tpl for=".">'
                            + '<div class="x-combo-list-item ux-icon-combo-item '
                            + '{' +this.iconClsField+ '}">'
                            + '{' + this.displayField + '}'
                            + '</div></tpl>';
        },
     
        afterRender:function() {
                    console.log("into afterRender");
            // call parent onRender
            this.callParent(arguments);
                    
            this.bodyEl.applyStyles({position:'relative'});
                    this.wrap = this.el.down('.x-form-item-body');
            this.el.down('input.x-form-field').addCls('ux-icon-combo-input');
            
            this.icon = Ext.core.DomHelper.append(this.wrap, {
                tag: 'div', cls:'ux-icon-combo-icon'
            });
        }, // end of function afterRender
     
        getStyleClass: function(value){
                    console.log("into getStyleClass: "+value);
            var rec = this.store.findRecord(this.valueField, value);
            if (rec){
                            console.log("returning: ux-icon-combo-icon "+rec.get(this.iconClsField));
                return 'ux-icon-combo-icon ' + rec.get(this.iconClsField); 
            }
            return '';
        },
     
        setValue: function(value) {
            console.log(value); 
                    if(value instanceof Object){ 
                        console.log(value.getData()); 
                    }
                    if (this.wrap && value) {
                        console.log("this.getValue()"+this.getValue());
                var currentClass = this.getStyleClass(this.getValue()),
                    newClass = this.getStyleClass(value);
                
                this.wrap.replaceCls(currentClass, newClass);
            }
            
            this.callParent(arguments);
        } // end of function setValue
    });

    My problem is that it returns the value as an Ext.data.Record object with my array inside it as data property, but it does not let my code to get the data array out of it, even though I try any of the methods inside the object, it keeps saying so and so function (value.getData()) is not a function, any idea on how I can get my data out of this object?

    Thanks

  8. #18
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    324
    Vote Rating
    8
    Scorpie is on a distinguished road

      0  

    Default


    Quote Originally Posted by adwebtiser View Post
    Hi there,

    I am using 4.2.0 but I have not been able to get this working, it keeps coming with the TypeError: el is null.

    Is there any chance of checking this with 4.2?

    Thank you.
    Try this version:

    Code:
    /**
    * Ext.ux.IconCombo Extension Class for Ext 4.1 Library
    *
    * @author Daniel Kuhnley
    * @class Ext.ux.IconCombo
    * @extends Ext.form.field.ComboBox
    * 
    * 
    * FIX BECAUSE WE HAD 4.0.7 FIRST, SEE http://www.sencha.com/forum/showthread.php?154499-v1.1-11-15-2011-Ext.ux.LoginDialog-LoginDialog-Extension&p=893481&viewfull=1#post893481
    * 
    */
    Ext.define('Ext.ux.form.IconCombo',{ 
      extend:'Ext.form.field.ComboBox',
      alias:'widget.iconcombo',
    
      initComponent:function() {
    
        Ext.apply(this, {
          scope:this,
          listConfig: {
            scope:this,
            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
    });
    I`m from Holland!

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