PDA

View Full Version : Ext List Box (Fixed Combo Box) with Icon



lukefowell89
10 Mar 2011, 6:57 AM
Got 2 questions rolled into one here,

Is there an Ext component that gives the same result as a HTML list box like below?

http://i.technet.microsoft.com/dynimg/IC354225.jpg

Also if there is, how would I go about adding an icon the left of each option?

Thanks

fay
10 Mar 2011, 7:14 AM
I think Ext.ux.MultiSelect (http://www.sencha.com/forum/showthread.php?20071-2.0-Ext.ux.Multiselect-ItemSelector-v3.0) can work like that.

Ext.ux.IconCombo (http://www.sencha.com/learn/Tutorial:Extending_Ext_Class) was created as part of a tutorial for Ext JS 1.x, but it shouldn't be too hard to update it for 3.x and incorporate it into MultiSelect.

lukefowell89
10 Mar 2011, 7:44 AM
Thanks for your reply, I managed to track down the multiselect box before I saw the post! But the iconCombo you linked should be very useful. I will look into that soon.

I have another quick question, I want to display a image for each selection. How should I go about doing this? I have prepared a mockup below, using absolute layout (as the window shall no be resizable) and used this code to create it:


this.contentPanel = new Ext.TabPanel({
bodyStyle : 'padding:10px',
activeTab : 0,
items : [
{
layout: 'absolute',
title: 'Chart Type',
items: [{
type: 'box',
border: false,
autoEl: {
tag: 'div',
html: '<b>Choose a Chart Type:</b>'
}
},{
xtype: 'multiselect',
fieldLabel: 'Multiselect<br />(Required)',
name: 'multiselect',
width: 130,
height: 165,
x: 0,
y: 20,
allowBlank:false,
store: [
[0, 'Column'],
[1, 'Bar'],
[2, 'Pie'],
[3, 'Line'],
[4, 'Area']
]
},{
type: 'box',
x: 140,
y: 0,
border: false,
autoEl: {
tag: 'div',
cls: 'pieImgLarge chartPrev',
autoEl: {
tag: 'img',
src: 'http://icons.iconarchive.com/icons/aha-soft/business/256/pie-chart-icon.png'
}
}
}]
},
{title: 'Data Range'},
{title: 'Chart Elements'}
]
});


Here is what it looks like:

25069

I suppose I will need to listen on select of multiselect box, and either add/remove an image or add/remove a class name with an image set as the background image.

Any suggetions how to do this best?

fay
10 Mar 2011, 7:54 AM
I think for that component you need to listen to the 'change' event, and I'd probably go with a BoxComponent on the right and use the css background image approach, changing the style with removeClass/addClass.

lukefowell89
10 Mar 2011, 8:05 AM
Is my code ok as it is at the moment or do you suggest changing that at all? I will probably add an ID to the seperate components since there will only ever be 1 chart window at a time. This will make my life easier when it comes to changing classes etc.