PDA

View Full Version : [2.X] IconCombo and tpl problem



DeeZ
11 Feb 2008, 6:17 AM
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 :



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>',
typeAhead: true,
editable: false,
forceSelection: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
});
What is wrong ?

Thx.

jsakalos
12 Feb 2008, 9:07 AM
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.

DeeZ
18 Feb 2008, 4:32 AM
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:


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:


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 = {
store: membersIconComboStore,
valueField: 'id',
displayField: 'accessLevel',
iconClsField: 'cssStyle',
qTip: 'desc',
typeAhead: true,
editable: false,
forceSelection: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
}


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

Thx

jsakalos
18 Feb 2008, 6:04 AM
Where do you want the QuickTip to show? On the combo itself or on the dropdown list on each item?

DeeZ
18 Feb 2008, 7:31 AM
On the dropdown list on each item.

Thx

jsakalos
18 Feb 2008, 7:43 AM
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.

DeeZ
18 Feb 2008, 8:02 AM
Ok thx ! In fact the code in my first post was correct ... I tested on the bad pages ...

Thx again !

jsakalos
18 Feb 2008, 8:12 AM
Yeah, can happen sometimes.... ;) Anyway, I'm glad you have resolved it.

chalu
25 Mar 2008, 7:17 PM
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:



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.

jsakalos
26 Mar 2008, 3:23 AM
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:



,clearValue:function() {
Ext.ux.IconCombo.superclass.clearValue.call(this);
if(this.icon) {
this.icon.className = '';
}
} // eo function clearValue