Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Dynamically adding items to drop down list of combo box.

  1. #1

    Default Answered: Dynamically adding items to drop down list of combo box.

    How to add items to the drop down list based on the selection of the item from the drop down list of other combo box? For Example, if in country combo box, USA is selected then it State combo box california, Texas should be displayed in its drop down list or if India is selected from country combo box then in State combo box drop down list, there should be states of India.

    How to do this in Sencha Architect? I am using three stores, one for first combo, second for USA States and third for INDIA States.

    Can you help in this?

  2. Hi,

    I have created a jsfiddle for your issue, its working fine as expected.

    http://jsfiddle.net/v6P8M/5/

    I hope this will help you.

    Thanks,
    Ankit

  3. #2
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Plesae see the link mentioned below -

    http://www.sencha.com/forum/showthre...nt-to-combobox

    Regards,
    Ankit

  4. #3

    Default Dynamatically setting the value of drop down list of combo box.



    Hi
    I have two combo boxes combo and Combo2 and three stores Store1, MyStore1, MyStore2. In first combo box, they are two values in drop-down list Fruits and Vegetables getting from Store1. If I select Fruits in first combo-box, then its showing Mango and Orange in drop-down list of second combo-box(Combo2) getting from MyStore1( COL2 as a field in Store and getting it as valuefield and displayField). However, if I select Vegetables in first combo-box, then its not showing Okra and Cauliflower in drop-down list of second combo-box(Combo2) getting from MyStore2( COL3 as a field in Store and getting it as valuefield and displayField).
    My scenario is as shown below written in select event of first combo box.
    Please help me in this.


    if(combo.getValue() == 'Fruits')


    {
    var combobox = Ext.getCmp('Combo2');
    var fieldValue1, displayField1;
    var vegstore = Ext.getStore('MyStore1');

    combobox.bindStore(vegstore);



    valueField = 'COL2';
    displayField = 'COL2';
    combobox.valueField = valueField;
    combobox.displayField = displayField;

    }


    else if (combo.getValue() == 'Vegetables')


    {

    var combobox = Ext.getCmp('Combo2');

    var fieldValue,displayField;
    var vegstore = Ext.getStore('MyStore2');

    combobox.bindStore(vegstore);



    valueField = 'COL3';
    displayField = 'COL3';
    combobox.valueField = valueField;
    combobox.displayField = displayField;


    }

  5. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Hi,

    I recommend not to go with bindStore() as it is slower than loadData().

    easy way to do this -

    if(combo.getValue() == 'Fruits')
    {
    var combobox = Ext.getCmp('Combo2');
    var fieldValue1, displayField1;
    var vegstore = Ext.getStore('MyStore1');
    valueField = 'COL2';
    displayField = 'COL2';
    combobox.valueField = valueField;
    combobox.displayField = displayField;

    combobox.store.loadData(vegstore.data.items);
    }
    else if (combo.getValue() == 'Vegetables')
    {
    var combobox = Ext.getCmp('Combo2');

    var fieldValue,displayField;
    var vegstore = Ext.getStore('MyStore2');

    valueField = 'COL3';
    displayField = 'COL3';
    combobox.valueField = valueField;
    combobox.displayField = displayField;
    combobox.store.loadData(vegstore.data.items);

    }

    Just make sure that you have given queryMode ='local' for combo2.

    Thanks,
    Ankit

  6. #5

    Default Dynamatically setting the value of drop down list of combo box.

    Thanks Ankit.
    But the problem is that when I select fruits from first combo box then its shows apple and orange. But second time when I select vegetables its doesnt show anything. Vice versa, if first time I select Vegetables from first combo box then its shows okra and cauliflower but when second time when I select Fruits it doesnt show anything. Also if I select dropdown item from the second combo box say apple (after its display)then it doesn't show in its display box. It show empty.
    Please help me in this

  7. #6
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Hi,

    I have tried with the code which i have copied in the earlier anwser, that's working fine as expected.

    Can you show your code,I think there should be something missing.

    Don't use bindStore if you are using, and make sure that queryMode is local for Combo box.


    Thanks,
    Ankit

  8. #7

    Default Dynamatically setting the value of drop down list of combo box.

    This is select event of combo box. I have query mode to local
    if(combo.getValue() == 'Fruits')


    {
    var combobox = Ext.getCmp('Combo2');
    var fieldValue1, displayField1;
    var vegstore = Ext.getStore('MyStore1');




    combobox.store.loadData(vegstore.data.items);

    valueField = 'COL2';
    displayField = 'COL2';
    combobox.valueField = valueField;
    combobox.displayField = displayField;

    }


    else if (combo.getValue() == 'Vegetables')


    {


    var combobox = Ext.getCmp('Combo2');


    var fieldValue,displayField;
    var vegstore = Ext.getStore('MyStore2');
    combobox.store.loadData(vegstore.data.items);

    valueField = 'COL3';
    displayField = 'COL3';
    combobox.valueField = valueField;
    combobox.displayField = displayField;
    ;
    }

  9. #8
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Hi,

    I think you are assigning value and display field after loadData thats why it is causing problem.

    Please call loadData of store after assigning the value field and display field to combobox.

    Regards,
    Ankit

  10. #9

    Default Dynamically adding items to drop down list of combo box.

    Thanks

    But I tried it . Its not working now also.

    Please suggest.

  11. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    200
    Answers
    3

    Default

    Hi,

    Try This -

    if(combo.getValue() == 'Fruits')
    {
    var combobox = Ext.getCmp('Combo2');
    var fieldValue1, displayField1;
    var vegstore = Ext.getStore('MyStore1');
    combobox.store.loadData(vegstore.data.items);

    valueField = 'COL2';
    displayField = 'COL2';
    combobox.valueField = valueField;
    combobox.displayField = displayField;
    combobox.displayTpl = new Ext.XTemplate(
    '<tpl for=".">' +
    '{[typeof values === "string" ? values : values["' + combobox.displayField + '"]]}' +
    '<tpl if="xindex < xcount">' + combobox.delimiter + '</tpl>' +
    '</tpl>'
    );
    combobox.picker = null;
    }
    else if (combo.getValue() == 'Vegetables')
    {
    var combobox = Ext.getCmp('Combo2');
    var fieldValue,displayField;
    var vegstore = Ext.getStore('MyStore2');
    combobox.store.loadData(vegstore.data.items);

    valueField = 'COL3';
    displayField = 'COL3';
    combobox.valueField = valueField;
    combobox.displayField = displayField;
    combobox.displayTpl = new Ext.XTemplate(
    '<tpl for=".">' +
    '{[typeof values === "string" ? values : values["' + combobox.displayField + '"]]}' +
    '<tpl if="xindex < xcount">' + combobox.delimiter + '</tpl>' +
    '</tpl>'
    );
    combobox.picker = null;
    }

    Regards,
    Ankit

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •