PDA

View Full Version : (noob) Populating combo from XmlStore with Ext js designer



Danijel
30 Jul 2010, 6:41 AM
I am trying to get working a simple (noob) examle of Combo loaded with data from Xml file.
Here is my xml:



<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<name>Savings Account</name>
<id>1</id>
</account>
<account>
<name>Current Account</name>
<id>2</id>
</account>
</accounts>



When I configure and add XmlStore, it reports 2 records found.

Here is the code for the XmlStore:



cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
}, cfg));
}
});
new cteo();

finally, this is the code for the combo:


MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Cuenta Origen'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'name',
valueField: 'id'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});It must be something simple, but I am stuck...

jarrednicholls
30 Jul 2010, 7:06 AM
The mapping on the id field is "name" and should be "id". Also, setup your "idPath" to be "id".

Finally, configure your ComboBox to have a triggerAction "all" if that's what you'd expect (otherwise the data won't load until you typeAhead). If you want all of the data to be loaded at once, you can change the ComboBox's "mode" to "local", and then set the Store's "autoLoad" to "true"...and keep "triggerAction" to "all" on the ComboBox.

Hope that helps, give those settings a try and let me know how you fare.

Danijel
30 Jul 2010, 7:53 AM
Hi Jarred,

Thanks for taking the time to look into this.
For now, I just want a combo to load on startup.
I have followed the steps you suggested, but still no luck.
Here is the modified code:

cteo.xml:



<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<acc_name>Savings Account</acc_name>
<acc_id>1</acc_id>
</account>
<account>
<acc_name>Current Account</acc_name>
<acc_id>2</acc_id>
</account>
</accounts>
Store code, I've set autoLoad to true and idPath:


cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
autoLoad: true,
idPath: 'acc_id',
fields: [
{
name: 'acc_name',
mapping: 'acc_name'
},
{
name: 'acc_id',
mapping: 'acc_id'
}
]
}, cfg));
}
});
new cteo();Here is the combo:

MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Account'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'acc_name',
valueField: 'acc_id',
mode: 'local',
triggerAction: 'all'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});I've set mode to 'local' and triggerAction to 'all'.

Danijel
30 Jul 2010, 8:28 AM
I forgot to mention that in the firebug I can see that cteo.xml is being fetched.

jarrednicholls
30 Jul 2010, 10:19 AM
Remove the "data" configuration..."url" and "data" are mutually exclusive, only one or the other can be set. Let me know if that helps.

Danijel
30 Jul 2010, 12:11 PM
Remove the "data" configuration..."url" and "data" are mutually exclusive, only one or the other can be set. Let me know if that helps.

that did it, thank you Jarred!

jarrednicholls
30 Jul 2010, 5:18 PM
Terrific to hear. You're welcome!