PDA

View Full Version : Using a Combo in a Listview Column definition, possible?



parky128
6 Oct 2010, 3:00 AM
Hi There,

I have a ListView object defined as below, using some templating to get the rows displayed how I would like. I also would like to get a combo box displayed in one of the columns which will just list a set of actions a user can select to perform.

Can this be achieved?



listview = new Ext.list.ListView({
store: store,
emptyText: 'No Vacancies To Display',
columnSort: true,
singleSelect: true,
columns: [{
header: 'Job Title',
width: .3,
tpl: '<p><span style="font-size:14px;"><b>{jobtitle}</b></span></p><br/><a href="#">{company}</a>'
},{
header: 'Location',
width: .2,
dataIndex: 'location'
},{
header: 'Salary',
tpl: '{salary:number("0,000.00")}'
},{
header: 'Candidates',
width: .2,
tpl: '<p>New: {newcandidates} <br/> Current: {currentcandidates}</p>'
}]
});

Condor
6 Oct 2010, 3:51 AM
Do you want to use a <select> element or a Ext.form.ComboBox?

You can simply specify a <select> element in your tpl, but when you want to render components inside I recommend the ComponentListView user extension.

parky128
6 Oct 2010, 3:54 AM
I think I would prefer to use an Ext.form.Combox, how would I go about doing this.

Also, where can I find details on the ComponentListView extension please?

Thanks

Condor
6 Oct 2010, 3:56 AM
See here (http://www.sencha.com/forum/showthread.php?79210-ComponentDataView-Ext-components-inside-a-dataview-or-listview).

parky128
6 Oct 2010, 4:58 AM
Hmm Ok,

I see how the extension works but am unsure this will really help me.

I see that in the ComponentListView example, the column definitions use component objects bound to data in the store.

In my case, the combo box I will want displayed will not be using any of the data in the store which the list view is bound too. It will be bound to some other store with a list of static items.

Perhaps I'm over complicating things here?

Condor
6 Oct 2010, 5:05 AM
You could simply put a div with a specific class in your tpl and attach a click event handler to the listview that checks if the event target has this class and show an Ext.menu.Menu at the event XY when it does.

parky128
6 Oct 2010, 5:07 AM
Yeah I know a context menu would probably be the easiest way, its just we have a requirement to display a drop down list of options in the final column.

Condor
6 Oct 2010, 5:11 AM
Yes, this would be like a context menu, but activated by the left mouse button instead of the right one.

Animal
6 Oct 2010, 5:41 AM
Hmm.... I could see the ActionColumn class being uprated to offer this.

Its items could be use to create MenuItems, and it could create a single Menu, and then show it on click of the cell.

The question then becomes what to render in the cell to indicate clickability.