Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: IconCombo

  1. #11
    Sencha User dekely's Avatar
    Join Date
    Aug 2008
    Posts
    215
    Vote Rating
    3
      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
      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
      0  

    Default 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
    16
      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
      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
    16
      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
      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
    387
    Vote Rating
    49
      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!

  9. #19
    Sencha User Psychokrameur's Avatar
    Join Date
    Jun 2008
    Posts
    164
    Vote Rating
    18
      0  

    Default

    Hello,

    Does anyone make this working with Ext 5?

    Thanks in advance,
    PsychoKrameur

Page 2 of 2 FirstFirst 12

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •