Results 1 to 10 of 10

Thread: [2.X] IconCombo and tpl problem

  1. #1
    Ext User
    Join Date
    May 2007
    Posts
    71

    Question [2.X] IconCombo and tpl problem

    Hi,

    I have a problem to display a template string associated to an IconCombo.
    The QuickTip is never displayed.
    The code to create the IconCombo is :

    PHP Code:
        var membersIconCombo = new Ext.ux.IconCombo({
            
    store: new Ext.data.SimpleStore({
                  
    fields: ['id''accessLevel''desc''cssStyle'],
                  
    data: [ ['W''R/W','Read / Write''ux-workspace-w'],
                          [
    'R''R',  'Read only',    'ux-workspace-r'],
                          [
    '''No',  'No access',    'ux-workspace-none'] ]
              }),
            
    valueField'id',
            
    displayField'accessLevel',
            
    iconClsField'cssStyle',
            
    tpl'<tpl for="."><div ext:qtip="{accessLevel}" class="x-combo-list-item">{desc}</div></tpl>',
            
    typeAheadtrue,
            
    editablefalse,
            
    forceSelectiontrue,
            
    readOnlytrue
            
    mode'local',
            
    triggerAction'all',
            
    selectOnFocus:true
        
    }); 
    What is wrong ?

    Thx.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    tpl is used to create dropdown list entries. If you want to use your own list item then you don't need to use IconCombo extension as the most of the power of IconCombo lies in its tpl pre-configured for icons. You change the tpl in your code so better would be to use normal combo.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    71

    Default

    In fact, I wanted to add tooltip on each row of the IconCombo.

    I tryed to define the 'tpl' define in this extension like this:
    PHP Code:
            Ext.apply(this, {
                
    tpl:  '<tpl for=".">'
                    
    '<div  '
                    
    + ((this.qTip!=null)? 'ext:qtip="{' this.qTip '}"' '')
                    + 
    ' class="x-combo-list-item ux-icon-combo-item '
                    
    '{' this.iconClsField '}">'
                    
    '{' this.displayField '}'
                    
    '</div></tpl>'
            
    }); 
    with qTip a new attribut to specify the store field used for the tooltip:
    PHP Code:
            var membersIconComboStore = new Ext.data.SimpleStore({
                      
    fields: ['id''accessLevel''desc''cssStyle'],
                      
    data: [ ['W'gettext(LBL_Common"aclWrite"),gettext(LBL_Common"aclWriteTip"), 'ux-workspace-w'],
                              [
    'R'gettext(LBL_Common"aclRead"), gettext(LBL_Common"aclReadTip"),  'ux-workspace-r'],
                              [
    'N'gettext(LBL_Common"aclNo"),   gettext(LBL_Common"aclNoTip"),    'ux-workspace-none'] ]
                  });
                  
            var 
    membersIconCombodefinition =  {
                
    storemembersIconComboStore,
                
    valueField'id',
                
    displayField'accessLevel',
                
    iconClsField'cssStyle',
                
    qTip'desc',
                
    typeAheadtrue,
                
    editablefalse,
                
    forceSelectiontrue,
                
    readOnlytrue
                
    mode'local',
                
    triggerAction'all',
                
    selectOnFocus:true
            

    But it doesn't work ... Do you have an idea ?

    Thx

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Where do you want the QuickTip to show? On the combo itself or on the dropdown list on each item?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    71

    Default

    On the dropdown list on each item.

    Thx

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Ok, implement then you qtip exactly same way as I've done for iconCls; should work. Also, try to remove namespace from qtip attribute, should work too.

    Should you sill have troubles, post a complete showcase, I'll take a look at it.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    71

    Thumbs up

    Ok thx ! In fact the code in my first post was correct ... I tested on the bad pages ...

    Thx again !

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Yeah, can happen sometimes.... Anyway, I'm glad you have resolved it.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #9
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480

    Question Some Issues, Saki

    Please take a look at IconCombo using the ytheme-gray theme, it hides the icon of an item in the dropdown list when you try to select it, certainly a css issue. Also you may want to consider overriding the clearValue method to remove the icon of a selection, for instance when the containing form is reset, right now only the text is cleared. I came up with this though, it just undo's what was done in setIconCls:

    Code:
     clearValue: function(){
        	Ext.ux.IconCombo.superclass.clearValue.call(this);
        	
        	// invert logic in setIconCls method
        	var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
            if(rec && this.icon) {
                this.icon.className = '';
            }
        }
    Perhaps you may have a better implementation.

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Re hiding icon: You're right, there must be some css conflict. You can take a look at http://filetree.extjs.eu which doesn't suffer from this this issue. I haven't tested all themes though.

    Re clearValue: Yeah, this go overlooked. The method should be:

    PHP Code:
        ,clearValue:function() {
            
    Ext.ux.IconCombo.superclass.clearValue.call(this);
            if(
    this.icon) {
                
    this.icon.className '';
            }
        } 
    // eo function clearValue 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


Posting Permissions

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