PDA

View Full Version : ExtJS 4 combo load data



zhxhdean
31 Aug 2011, 7:11 PM
<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
1 Sep 2011, 1:38 PM
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
1 Sep 2011, 5:46 PM
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
1 Sep 2011, 6:00 PM
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
1 Sep 2011, 6:04 PM
i use chrome ,document.write(scombox), scombox is "Ext.Class.Class.newClass",
iuse extjs 4.0.2a, maybe it's bug ?

skirtle
1 Sep 2011, 6:10 PM
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
1 Sep 2011, 6:28 PM
i listen to your views,use console.log
2782627827

skirtle
1 Sep 2011, 6:38 PM
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
1 Sep 2011, 7:00 PM
thank you very much.
problem solved.

select: function (combo, record, index) {

scombox.clearValue();

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

skirtle
1 Sep 2011, 7:03 PM
Please can you mark the thread as Answered?

zhxhdean
1 Sep 2011, 7:04 PM
ok