为什么我的ExtJS 4.2 ComboBox没有更新？

Question

在以下代码中，第一次用户从第一个组合中选择一个值时，不会填充第二个组合。第二次在第一个组合中选择一个值时，第二个组合被正确填充。

这是一个简化的示例，但如果我们可以解决这个问题，我的大代码中的问题也可能会得到解决。

Ext.onReady(function() {
    var level1Store = Ext.create('Ext.data.Store', {
        fields: [{    name: 'Level1name'   }, {    name: 'Level2names'   }],
        data: [
            {   "Level1name": "level1 value1",
                "Level2names": [
                    { "Level2name": "level1 value1_1"},
                    { "Level2name": "level1 value1_2"},
                    { "Level2name": "level1 value1_3"}
                ]
            },
            {   "Level1name": "level1 value2",
                "Level2names": [
                    { "Level2name": "level1 value2_1"},
                    { "Level2name": "level1 value2_2"},
                    { "Level2name": "level1 value2_3"}
                ]
            },
            {   "Level1name": "level1 value3",
                "Level2names": [
                    { "Level2name": "level1 value3_1"},
                    { "Level2name": "level1 value3_2"},
                    { "Level2name": "level1 value3_3"}
                ]
            }
        ]
    });
    var level2Store = Ext.create('Ext.data.Store', {
        fields: [{    name: 'Level2name'   }],
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        }
    });


    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 500,
        items: [{
            xtype: 'combo',
            id: 'combo1',
            fieldLabel: 'Level1',
            store: level1Store,
            displayField: 'Level1name',
            valueField: 'Level1name',
            listeners: {
                change: function() {                
                    var combobox = Ext.getCmp('combo1');
                    var v = combobox.getValue();
                    var record = combobox.findRecord(combobox.valueField || combobox.displayField, v);
                    var index = combobox.store.indexOf(record);


                    var dataSource = level1Store.getAt(index).get("Level2names");
                    level2Store.removeAll();
                    level2Store.add(dataSource);
                    level2Store.sync();
                }
            }
        }, {
            xtype: 'combo',
            fieldLabel: 'Level2',
            store: level2Store,
            displayField: 'Level2name',
            valueField: 'Level2name'
        }],


        renderTo: Ext.getBody()
    });
});