View Full Version : Combobox column with dynamic data in ExtJS 4 Grid

22 Nov 2011, 4:14 AM
I have a requirement to create a grid similar to the screenshot provided. The Assignee column would be containing combobox in each row that too with different values.

The data store for grid would also contain the data for populating the combo’s for each row and every piece of data is coming from database, even all the combobox values are also coming from the database.

For reference my grid store JSON is like this:

So among this Json, assignee is the value with which combobox should be selected with, assigneeList is the array having all the values of the combobox. Request number is the first coloumn.

My problem is I am not able to implement multiple combobox inside the grid column whose all data is coming dynamically.

Please provide a solution in ExtJS 4.

22 Nov 2011, 10:54 AM
Moved to Ext JS 4 Q&A forum for you.

22 Nov 2011, 11:57 AM
Based on your screenshot, I'd probably try to do this using the Component Column UX:


Using a different store for each combobox is pretty straightforward as the renderer function has full control over each combobox and can use the record to determine which data to use.

22 Nov 2011, 11:52 PM
Nice thoughts skirtle but my problem is that i am going to fetch the records from Database.
And i do not know what number of records would be there.May be 10 , maybe 1000.
Thus i want to create store for the combos dynamically.Also, I need to default select the value coming for the combo via different field ('Assignee' see 2nd snapshot) of JSON.
Hope now you have a clear view of my problem.

23 Nov 2011, 12:31 AM
I don't understand why the approach I've suggested wouldn't work. You have full control over the store for each combobox, they can all contain totally different data if you want. If that doesn't meet the requirement then I must be misunderstanding what you mean by 'dynamic'.

As far as I can tell you just want to use the data in assigneeList to populate the store and the value in assignee to set the value. Both of these should be available in the renderer function through the record so long as you've configured your fields correctly.

Jeff Liotta
6 Jun 2012, 8:49 AM
Were you able to solve this without using Skirtle's component column? if so can you please provide details

14 Jun 2012, 6:02 AM
Hey Jeff,

I would suggest you better use the editor grid for such an implementation.
Allthough i figured a way out but it will keep on getting complex at every progressive stage.

Jeff Liotta
14 Jun 2012, 7:30 AM
I am able to solve this by using the combination of renderer and editor.
(1) Renderer picks up the 'display text' from the grid's store.
(2) Editor (xtype:combobox) I have added 'focus' event for the combo to reload the combo's store with the list values corresponding that cell. And then on the 'select' event of the combo, I set the 'display text' back to the Grid's store so that the renderer kicks back in and shows the newly selected text from combo.

Yes the code got really complex. There was a but that I noticed in this process (latest ext js 4.1). The Model's set() method was expecting the key of type string. In my logical model it happened to be a 'number'. So I had to convert the number into string before calling the set method.