Adding a MultiColumn ComboBox ....

[apresley]

Hi all,

We have need for a single "widget" in our application which would be the existing extjs combobox widget with multiple column capabilities. Specifically, we want to be able to add N columns, so that when the user clicks on the combobox that it displays multiple columns of information. If used in a Client list, for instance, the first column (which is searched when typing) might be the name, the second column might be the city, third the state, and last the zip code. Ideally, we'd also like to embed images into the column (so, for instance, we could show four stars on the last column of a movie rating site). I understand that this feature might not be too difficult to do with a ComboBox and a grid.

However, we're hoping to get up and going on this very quickly (we looked at using the Nitobi combobox which already does this, but the forums, documentation, and support suck). I'm hoping that someone here would be interested in doing this as a "job" which can be put back online or shoved in the source code. Hopefully we can then just include the JS files, and make one or two calls to the library, and be done.

IE, I'm willing to pay for the feature and a quick "HOWTO" that can be put back in extjs for others to use. I'm not sure what it would cost for someone to implement .... and put back up here in the "Extras" for everyone else to use.

Any takers? Is there a better place for me to post this?

Thanks!

--
Anthony

[greyknght1]

I would recomend that you use a template. I use this for selecting an icon from the dropdown;

tpl: '<img src="BrandarisAppBuilder/Master_Images/icons/{page}">',

Page is the name from the datastore. You could do something like this for multiple columns

[apresley]

Thanks for the pointer.

[fangzhouxing]

Anyone have example code of multiColumn comboBox?

[JorisA]

var store_example = new Ext.data.SimpleStore({
fields: ['value','col1','col2'],
data: [['val1','Collumn 1','Collumn 2'],['hworld','Hello','world']]
});

status_combo = new Ext.form.ComboBox({
mode : 'local',
store : store_example,
valueField: 'value',
triggerAction: 'all',
name : 'type',
editable : false,
tpl: '<div class="x-combo-list-item"><div class="col1">{col1}</div><div class="col2">{col2}</div></div>',
});

I think that should work. Style .col1 and .col2 with fixed width etc.
Not sure how it will behave if editable=true.

[fangzhouxing]

JorisA, great job. I will try it soon.

[fangzhouxing]

tpl: '<div class="x-combo-list-item"><div class="col1">{col1}</div><div class="col2">{col2}</div></div>',

I replace above code like this:


tpl: '<div class="x-combo-list-item"><div style="position: absolute;left: 0;">{col1}</div><div style="position: relative;left: 150;">{col2}</div></div>'