1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default Unanswered: Combobox column with dynamic data in ExtJS 4 Grid

    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to Ext JS 4 Q&A forum for you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    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 services@sencha.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.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Based on your screenshot, I'd probably try to do this using the Component Column UX:

    http://www.sencha.com/forum/showthread.php?148064

    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.

  4. #4
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default @skirtle

    @skirtle


    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.

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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. #6
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    110
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default


    Were you able to solve this without using Skirtle's component column? if so can you please provide details

  7. #7
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    110
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default solved

    solved


    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.