Extjs load combo boxes dynamically using recursive json data

Question

I have set of models and a store as given below.

Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'name', 'total'],

        hasMany: {
            model: 'Order',
            name: 'orders'
        },

        proxy: {
            type: 'rest',
            url: 'users.json',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    });

    Ext.define('Order', {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'total'],

        hasMany: {
            model: 'OrderItem',
            name: 'orderItems',
            associationKey: 'order_items'
        },
        belongsTo: 'User'
    });

    Ext.define('OrderItem', {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'price', 'quantity', 'order_id', 'product_id'],

         belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'User'
    });

And below is the json file which I use to load data.

{
    "users": [
        {
            "id": "123",
            "name": "Ed",
            "orders": [
                {
                    "id": "50",
                    "total": "100",
                    "order_items": [
                        {
                            "id"      : "20",
                            "price"   : "40",
                            "quantity": "2",
                            "product" : {
                                "id": "1000",
                                "name": "MacBook Pro"
                            }
                        },
                        {
                            "id"      : "21",
                            "price"   : "20",
                            "quantity": "3",
                            "product" : {
                                "id": "1001",
                                "name": "iPhone"
                            }
                        }
                    ]
                }
            ]
        },
         {
            "id": "124",
            "name": "Nisha",
            "orders": [
                {
                    "id": "52",
                    "total": "1004",
                    "order_items": [
                        {
                            "id"      : "22",
                            "price"   : "40",
                            "quantity": "23",
                            "product" : {
                                "id": "1002",
                                "name": "Nokia"
                            }
                        },
                        {
                            "id"      : "23",
                            "price"   : "100",
                            "quantity": "3",
                            "product" : {
                                "id": "1003",
                                "name": "apple"
                            }
                        }
                    ]
                }
            ]
        }

    ]
}

I am loading the user IDs to L1_combo_box as below and according to the user ID the user selects from the L1_combo_box, I need to load order_item ids to L2_combo_box .

For example, I load user ids 123, 124 to L1_combo_box and when user selects 123 from L1 combo box, I need to load 20,21 to L2 combo box. If user selects 124, then I need to load 22,23. Below is the partially completed code. can anyone help me to complete this?

var searchFormFieldsetItems =    [
        {
            xtype: 'fieldcontainer',
            combineErrors: true,
            name: 'search_form_fieldset_items',
            msgTarget: 'side',
            fieldLabel: '',
            defaults: {
                hideLabel: true
            },
            items: [{
                xtype: 'combo',
                name: 'L1_combo_box',
                displayField: 'id',
                valueField: 'id',
                queryMode: 'remote',
                store:store,
                listeners: {
                    change: {
                        fn: function(combo, value) {
                            var store1 = 'users/orders/order_items/';//This line is partially completed
                            L2_combo_box.bindStore(store1);

                        }
                    }
                }

            },{
                xtype: 'combo',
                name: 'L2_combo_box',
                displayField: 'id',
                valueField: 'id'


            }
]

} ];

Narendra Jadhav · Accepted Answer · 2018-02-06 13:08:06Z

For this you need to use select for combobox and inside of select event you need to use loadData() method of store to adding data in second combo.

In this FIDDLE, I have created a demo using your code and put my efforts for showing data in second combo. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('User', {
            extend: 'Ext.data.Store',
            autoLoad: true,
            alias: 'store.user',
            fields: ["id", "name", "orders"],
            proxy: {
                type: 'ajax',
                url: 'users.json',
                reader: {
                    type: 'json',
                    rootProperty: 'users'
                }
            }
        });
        Ext.define('Order', {
            extend: 'Ext.data.Store',
            alias: 'store.order',
            field: ["id", "price", "quantity", "product"],
            storeId: 'order'
        });
        Ext.create('Ext.form.Panel', {
            title: 'Example Combo',
            bodyPadding: 5,

            defaults: {
                width: 250
            },

            // The fields
            defaultType: 'combo',
            items: [{
                name: 'L1_combo_box',
                displayField: 'id',
                valueField: 'id',
                queryMode: 'local',
                emptyText: 'Select user',
                store: {
                    type: 'user'
                },
                listeners: {
                    select: function (combo, rec) {
                        var L2_combo_box = combo.up('form').getForm().findField('L2_combo_box'),
                            order = rec.get('orders') || [],
                            data = [];
                        //reset combo value
                        L2_combo_box.reset();
                        //If order have multipe data then need use forEach for all data
                        order.forEach(item => {
                            data = data.concat(item.order_items);
                        });
                        //load data in combo store
                        Ext.getStore('order').loadData(data);
                    }
                }
            }, {
                emptyText: 'Select order items',
                name: 'L2_combo_box',
                displayField: 'id',
                valueField: 'id',
                queryMode: 'local',
                store: {
                    type: 'order'
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

Thanks a lot and I have a small question, Is there a way to bind store to combo box 2 rather than specifying a store inside it? (This is because I have situations where the sub stores have different structures)
Yes, you can create one another store and provide to that combo. After do same functionality. Please see I have updated my answer. I hope this same as you want.

Collectives™ on Stack Overflow

Extjs load combo boxes dynamically using recursive json data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related