22 Nov 2011 4:14 AM #1
Unanswered: Combobox column with dynamic data in ExtJS 4 Grid
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 #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
Moved to Ext JS 4 Q&A forum for you.Mitchell Simoens @LikelyMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services email@example.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
22 Nov 2011 11:57 AM #3
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 #4
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 #5
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.
6 Jun 2012 8:49 AM #6
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 #7
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.
14 Jun 2012 7:30 AM #8
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.