Hi guys i am dynamically trying to change the root of a jsonstore which feeds a combobox so that the corresponding changes are reflected in the combobox but althought the root changes the data from the previous gets loaded...heres my code

my json filles

1) combo1.json

Code:
{
cat1:[
    {
        id:'1',
        value : 'A'
    },{
        id:'2',
        value : 'B'
    }]
}
2) combo2.json
Code:
{
cat2:[
    {
        cid:'1',
        id:'1',
        value : 'A1'
    },{
        cid:'1',
        id:'2',
        value : 'A2'
    },{
        cid:'2',
        id:'3',
        value : 'B1'
    },{
        cid:'2',
        id:'4',
        value : 'B2'
    }    
    ]
    ,
    cat3:[
    {
        cid:'1',
        id:'1',
        value : 'C1'
    },{
        cid:'1',
        id:'2',
        value : 'C2'
    },{
        cid:'2',
        id:'3',
        value : 'D1'
    },{
        cid:'2',
        id:'4',
        value : 'D2'
    }    
    ]
}
My js file

Code:
function load()
{    
    
    var cat1Store = new Ext.data.JsonStore({

        fields: ['id', 'value'],
        root: 'cat1',
        url: 'json/combo1.json',
        autoLoad : true
    });

    var cat2Store = new Ext.data.JsonStore({
        id : 'storengb',
        fields: ['cid','id', 'value'],
        root: 'cat2',
        url: 'json/combo2.json',
       // pruneModifiedRecords : true
            //autoLoad : true
    });


    var myFormPanel = new Ext.form.FormPanel(
            {
                title : 'My Form',
                renderTo : Ext.getBody(),
                labelWidth : 50,
                width : 500,
                frame : true,
                layout : 'form',
                items :[
                        {
                            xtype : 'combo',
                            id : 'combo1',
                            hiddenName: 'genre',
                            fieldLabel: 'Cat1',
                            mode: 'local',
                            store: cat1Store,
                            displayField:'value',
                            valueField:'value',
                            triggerAction: 'all',
                            listeners: 
                            {
                            select :
                            function(e) 
                                {
                                    var c1 = Ext.getCmp('combo1').getValue();
                                    var c2 = Ext.getCmp('combo2').getStore();
                                    c2.removeAll();
                                    c2.root = 'cat3; /* the root changed to "cat3"
                                                             this change is reflected in firebug 
                                                              */
                                    c2.load();
                                }
                            }
                        },
                        {
                            xtype : 'combo',
                            id : 'combo2',
                            fieldLabel: 'Cat2',
                            name : 'c2',
                            mode: 'local',
                            store: cat2Store,
                            displayField:'value',
                            triggerAction: 'all',
                            valueField:'id'
                        }
                        ]
            });

}

Ext.onReady(load);
Ideally after changing the root of cat2Store to cat3 the data that gets populated in combo2
should be C1,C2,D1,D2 but it still remains A1,A2,B1,B2


I think this is a bug please help me out