PDA

View Full Version : Populating Combo using XML as data source



bunty
8 Dec 2012, 9:58 PM
Below is the XML format:


<customers> <customer>
<name>Customer1</name>
</customer>
<customer>
<name>Customer2</name>
</customer>
<customer>
<name>Customer3</name>
</customer>
</customers>

I want to load the customer names in a combo reading the above XML file. Below is the code I tried:


Ext.require('Ext.tab.*');

Ext.define('Customer',{
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' }
]
});


var customerStore = Ext.create('Ext.data.XmlStore', {
autoLoad: true,
url: '/XML/xml/customer.xml',
fields: ['name'],
record: 'customer'
});


Ext.define('CustomerCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.customercombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: customerStore
});


Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.widget('panel', {
renderTo: 'pan1',
title: 'Basic Panel',
width:600,
height:100,
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
pack: 'end',
items: [{
fieldLabel: 'Customer',
xtype: 'customercombo',
width: 234,
margin: '5 5 5 5'
}]
});
});

But the code is not working. The Drop down is empty and an exception is thrown in Chrome console:

Uncaught TypeError: Cannot call method 'indexOf' of undefined

Please help

Regards,

mitchellsimoens
10 Dec 2012, 10:06 AM
Try this:


Ext.define('Customer', {
extend : 'Ext.data.Model',

fields : [
{ name : 'name', type : 'string' }
]
});

Ext.define('CustomerCombo', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.customercombo',

allowBlank : false,
queryMode : 'local',
valueField : 'id',
displayField : 'name'
});

Ext.onReady(function() {

var customerStore = Ext.create('Ext.data.Store', {
autoLoad : true,
model : 'Customer',
proxy : {
type : 'ajax',
url : '/XML/xml/customer.xml',
reader : {
type : 'xml',
record : 'customer'
}
}
});

Ext.widget('panel', {
renderTo : 'pan1',
title : 'Basic Panel',
width : 600,
height : 100,
defaults : {
bodyPadding : 10,
border : false,
xtype : 'panel',
layout : 'anchor'
},
layout : 'hbox',
pack : 'end',
items : [
{
fieldLabel : 'Customer',
xtype : 'customercombo',
width : 234,
margin : '5 5 5 5',
store : customerStore
}
]
});

});

bunty
11 Dec 2012, 4:35 AM
Thanks for the help, its woking fine.

I modified the xml with namespaces for each and every element like this:


<c:customers> <e:customer>
<p:name>Customer1</p:name>
</e:customer>
<e:customer>
<p:name>Customer2</p:name>
</e:customer>
<e:customer>
<p:name>Customer3</p:name>
</e:customer>
</c:customers>

And modified the code like this:


Ext.define('Customer', { extend : 'Ext.data.Model',


fields : [
{ name : 'p:name', type : 'string' }
]
});


Ext.define('CustomerCombo', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.customercombo',


allowBlank : false,
queryMode : 'local',
valueField : 'id',
displayField : 'p:name'
});


Ext.onReady(function() {


var customerStore = Ext.create('Ext.data.Store', {
autoLoad : true,
model : 'Customer',
proxy : {
type : 'ajax',
url : '/XML/xml/customer.xml',
reader : {
type : 'xml',
record : 'e:customer'
}
}
});


Ext.widget('panel', {
renderTo : 'pan1',
title : 'Basic Panel',
width : 600,
height : 100,
defaults : {
bodyPadding : 10,
border : false,
xtype : 'panel',
layout : 'anchor'
},
layout : 'hbox',
pack : 'end',
items : [
{
fieldLabel : 'Customer',
xtype : 'customercombo',
width : 234,
margin : '5 5 5 5',
store : customerStore
}
]
});


});

But did not work again.

Initially thought that with or without namespace, the code should be same by changing the names only but its not like that :(

Any help on this please?

bunty
13 Dec 2012, 5:31 AM
any inputs on this?