Extjs使用递归json数据动态加载组合框

时间:2018-02-06 09:14:59

标签: json extjs combobox

我有一组模型和一个商店,如下所示。

{
    "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"
                            }
                        }
                    ]
                }
            ]
        }

    ]
}

以下是我用来加载数据的json文件。

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'


            }
]

我正在将用户ID加载到L1_combo_box,如下所示,根据用户从L1_combo_box中选择的用户ID,我需要将order_item id加载到L2_combo_box。

例如,我将用户ID 123,124加载到L1_combo_box,当用户从L1组合框中选择123时,我需要加载20,21到L2组合框。如果用户选择124,那么我需要加载22,23。 以下是部分完成的代码。任何人都可以帮我完成这个吗?

{{1}}

}  ];

1 个答案:

答案 0 :(得分:1)

为此,您需要select用于combobox var cards:Array<Any>? = [] let i : Int = (sender.layer.value(forKey: "index")) as! Int cards?.remove(at: i) 事件内部,您需要使用loadData() store方法在第二时间添加数据select

在这个 FIDDLE 中,我使用您的代码创建了一个演示,并努力在第二个组合中显示数据。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

combo