ExtJS 4 combo load data

[zhxhdean]

<script type="text/javascript">


Ext.onReady(function () {



Ext.define("dflModel", {
extend: "Ext.data.Model",
fields: [
{ name: "id", type: "int" },
{ name: "text", type: "string" }
]
});


var states = Ext.create('Ext.data.Store', {
model: "dflModel",
proxy: {
url: "loaddata.ashx",
type: "ajax"
}
,autoLoad: true
})
var defaults = Ext.create('Ext.data.Store', {
fields: ['id', 'text'],
data: []
})


var panel = Ext.create('Ext.form.Panel', {
id: 'formcom',
title: 'combo',
width: 500,
frame: true,
renderTo: Ext.getBody(),
defaultType: 'combo',
items: [{
id: 'combo1',
xtype: 'combo',
fieldLabel: 'city',
labelWidth: 20,
emptyText: 'select',
editable: false,
queryMode: 'local',
store: states,
displayField: 'text',
valueField: 'id',
listeners: {
select: function (combo, record, index) {
scombox.clearValue();
scombox.store = new Ext.data.Store({
model: 'dflModel',
proxy: {
url: "loaddata.ashx?cityid=" + combo.value,
type: "ajax"
}
,autoLoad: true
});
defaults.load();
}
}
}]
})


var scombox = Ext.create('Ext.form.field.ComboBox', {
id: 'combo2',
fieldLabel: 'area',
labelWidth: 20,
store: defaults,
editable: false,
queryMode: 'local',
displayField: 'text',
valueField: 'id',
margin: '-2 0 0 180',
emptyText: 'select',
triggerAction: 'all',
renderTo: Ext.getCmp('formcom').getEl() //Ext.getBody()//
})


})




</script>


Server Data
[{"id":11,"text":"beijing"},{"id":12,"text":"shanghai"},{"id":13,"text":"guangzhou"}]

first combo can load data ,when onselect server side data send to client but second combo can't load data

my english poor , thx

[skirtle]

Please use CODE tags when posting code (# button on the editor toolbar).

There may well be other problems but the first problem I see is this line:


scombox.store = new Ext.data.Store({

If you want to change the store you'd need to call bindStore() but in your case you're only changing a request parameter so you could do something like this instead:


// Configure the store for scombox properly from the outset
var defaults = Ext.create('Ext.data.Store', {
model: 'dflModel',
proxy: {
type: 'ajax',
url: 'loaddata.ashx'
}
});

...

select: function(combo, record, index) {
scombox.clearValue();

scombox.getStore().load({
cityid: combo.getValue()
});
}

[zhxhdean]

first thank you for answer my question.

i use scombox.getStore() ,but javascript error message:'Object [object Object] has no method 'getStore'' ,view the Extjs4 document ,combox has getStore(). why ??

[skirtle]

My guess would be that scombox isn't the combobox you think it is. Try adding:


console.dir(scombox);

In either Firebug or Chrome that should give you enough info to figure out what scombox actually is.

Have a look through your code for places where the variable scombox is assigned, make sure it only happens the once.

[zhxhdean]

i use chrome ,document.write(scombox), scombox is "Ext.Class.Class.newClass",
iuse extjs 4.0.2a, maybe it's bug ?

[skirtle]

I don't think it is a bug in ExtJS, I'm pretty sure it's a bug in your code.

If you're using Chrome, inside the select listener use either console.log(scombox) or console.dir(scombox) then dig into the object in the console to figure out what it is. document.write() won't tell you anything useful.

[zhxhdean]

i listen to your views,use console.log
2782627827

[skirtle]

OK, problem solved.

ExtJS 4.0.2 didn't have a getStore() method, the docs are for 4.0.6. You'll have to use scombox.store instead.

[zhxhdean]

thank you very much.
problem solved.

select: function (combo, record, index) {

scombox.clearValue();

scombox.store.load({
params: { cityid: combo.value}
})
}

[skirtle]

Please can you mark the thread as Answered?

[zhxhdean]

ok