Linked-ComboBoxes Error

[ErnestoR]

Hello Forum,
I'm trying to do linked to comboboxes so that whn the user chooses the first combo box the second's store is loaded with specific data similar to country and state combo boxes.
Im encountering an error where the second combo box shows the data but it covered by the loading gif.
I'm using an MVC approach and Ext 4.0.7

ComboBoxes


{
xtype: 'combo',
id: 'comboSede',
allowBlank: false,
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Seleccionar Sede',
name: 'sede_idSede',
displayField: 'sede',
valueField: 'idSede',
store: 'Sede',
queryMode: 'local',
emptyText: 'Seleccionar un Sede'
},{
width: 50,
disabled: true,
id: 'comboCategoria',
xtype: 'combo',
value: '',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Escoja una Categoria',
name: 'categoria_idCategoria',
displayField: 'nombreCategoria',
valueField: 'idCategoria',
queryMode: 'local',
store: 'Categoria',
emptyText: 'Selecciona un Sede Primero'
}


Combo Boxes Stores


Ext.define('CCuern.store.Categoria', {
extend: 'Ext.data.Store',
model: 'CCuern.model.Categoria',
proxy: {
type: 'ajax',
api: {
read: 'data/Categorias/read.php'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
},
writer: {
type: 'json',
root: 'data',
encode: true
}
}
});


And Finally The Controller

Ext.define('CCuern.controller.Registro', {
extend: 'Ext.app.Controller',
stores: [
'Sede',
'Categoria'
],
views: [
'registro.Form'
],

init: function() {
console.log('READY');

this.control({
'registroForm combo[id=comboSede]': {
change: this.selectSede
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
},

selectSede: function(combo) {
//console.log("En controller");
var comboSede = Ext.ComponentQuery.query('#comboSede')[0];
var comboCategoria = Ext.ComponentQuery.query('#comboCategoria')[0];
comboCategoria.enable(); //step 2
comboCategoria.clearValue(); //step 3
console.log(this.getCategoriaStore().count());
this.getCategoriaStore().load({ //step 4
params:{
idSede:comboSede.getValue() //step 5
}
});
console.log(this.getCategoriaStore().count() );
}
});
I think my error is in the Controller but I can't seem to see why.

This is the screen shot of the error it just keeps loading even though it has clearly loaded the data via json proxy.

29557

29558

Thanks for the help..

[skirtle]

From a quick look I'd say your code should work. I suspect you may be hitting this bug:

http://www.sencha.com/forum/showthread.php?152324

There are a few small, unrelated changes I might make to your code. You don't need forceSelection if you're specifying editable: false. You don't need triggerAction: 'all', it's the default. In your selectSede method you have combo and comboSede which are both the same combobox. You also don't need to call getValue(), the value is passed as the second argument to selectSede.