PDA

View Full Version : Ext.form.field.ComboBox tooltip on items



bunty
29 Sep 2012, 7:16 PM
Below is the combo code:


Ext.define('Grade', {

extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});

Ext.define('GradeCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gradecombo',
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Grade',
data: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
}
});

And here is the layout code for combo:


Ext.onReady(function(){


Ext.widget('panel', {
renderTo: 'pan1',
title: 'Basic Panel',
width:300,
height:100,
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
fieldLabel: 'Grade',
xtype: 'gradecombo',
width: 234
}]
});
});

I want to display tooltip message for the description of each grade when the user hovers mouse on the drop down of the combo items. Here is the description store:


var store = ['Marks between 70 and 80', 'Marks between 60 and 70', 'Marks between 50 and 60'];

Please let me know how to achieve this.
Regards,

vietits
30 Sep 2012, 12:42 AM
Below is my solution for your request.


Ext.define('Grade',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'qtip', type: 'string' }
]
});

Ext.define('GradeCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gradecombo',
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Grade',
data: [
{ id: 1, name: 'A', qtip: 'Marks between 70 and 80'},
{ id: 2, name: 'B', qtip: 'Marks between 60 and 70'},
{ id: 3, name: 'C', qtip: 'Marks between 50 and 60'}
]
},
listConfig: {
tpl: [
'<ul><tpl for=".">',
'<li role="option" class="x-boundlist-item" data-qtip="{qtip}">{name}</li>',
'</tpl></ul>'
]
}
});



Ext.onReady(function(){
Ext.tip.QuickTipManager.init();


Ext.widget('panel', {
renderTo: Ext.getBody(),
title: 'Basic Panel',
width:300,
height:100,
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
fieldLabel: 'Grade',
xtype: 'gradecombo',
width: 234
}]
});
});

bunty
30 Sep 2012, 1:27 AM
can you explain this little bit of code:


'<ul><tpl for=".">', '<li role="option" class="x-boundlist-item" data-qtip="{qtip}">{name}</li>',
'</tpl></ul>'

I am really confused with this :(

vietits
30 Sep 2012, 1:52 AM
...
listConfig: {
tpl: ['<ul><tpl for=".">',
'<li role="option" class="x-boundlist-item" data-qtip="{qtip}">{name}</li>',
'</tpl></ul>']
}

This is template to render items in dropdown list of combobox. You can see more information about template here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate