PDA

View Full Version : Combo Boxes with Multiple Columns



apresley
1 Jun 2012, 12:29 PM
We currently use an old version of extjs - version 1.x or 2.x, and are looking at upgrading to the latest and greatest - primarily because we are concerned about speed and browser compatibility.

Our primary concern are the creation of comboboxes ... specifically those that might have several columns. For example, we may have a drop-down showing a person's name in column 1, then another column 2 with their address, and a column 3 with their phone number.

Ideally, we should be able to type in this combobox to jump around their name (for example).

Is there a component already done that can accomplish this for us?

Thanks!

scottmartin
1 Jun 2012, 1:57 PM
You should be able to use itemTpl to build the list as needed:

itemTpl : '{username} ({phone})'

Regards,
Scott.

feddgis
21 Jun 2012, 5:47 AM
itemTpl doesn't work

bclinton
30 Jul 2012, 2:35 PM
itemTpl doesn't work

No it doesn't. But there is an example in the 4.1 docs for Ext.form.field.ComboBox:



tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),


But when I tried to use floating divs to simulate table-like aligned columns as I had in Ext JS 3, my combobox went all screwy and wouldn't line up or select items correctly.

I was able to get it to work using a table with specified widths for the table and TDs inside the x-boundlist-item div like this:



tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item"><table width="220"><tr><td width="160">{item}</td><td width="40" align="right">{price}</td></tr></table></div>',
'</tpl>'
),


It's ugly, but it works. If anyone is able to get it to work with floating DIVs I'd like to see your code because I was unable to make it work using the same code I used in Ext JS 3:



<style>
.combo-col1 {
width: 140px;
float: left;
}
.combo-col2 {
width: 40px;
}
</style>

tpl: '<tpl for="."><div class="x-combo-list-item"><div class="combo-col1">{item}</div><div class="combo-col2">${price}</div></div></tpl>'