Using a Combo in a Listview Column definition, possible?

[parky128]

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]

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]

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]

See here.

[parky128]

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]

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]

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]

Yes, this would be like a context menu, but activated by the left mouse button instead of the right one.

[Animal]

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.