View Full Version : Populating Combobox with Ajax call and xml

9 Aug 2007, 1:25 AM

I am new to ext and am trying make an ajax call to return xml that maps to my combobox, i tried looking for examples, but cannot find any that use ajax and xml to map to the combo boxes valuefield and display field.

below is my source code that returns the followiing example xml.

<WorkflowType ID="1000" Description="Send Email" />
<WorkflowType ID="1001" Description="Follow Up Call" />
<WorkflowType ID="1002" Description="Post Literature" />
<WorkflowType ID="1003" Description="Invite to Event" />
<WorkflowType ID="1004" Description="Arrange Appointment" />
<WorkflowType ID="1005" Description="Send Appointment Letter" />
<WorkflowType ID="1006" Description="Send Christmas Card" />
<WorkflowType ID="1007" Description="Second Follow Up" />
<WorkflowType ID="1008" Description="Second Follow Up" />
<WorkflowType ID="1009" Description="Do Step 1" />
<WorkflowType ID="1010" Description="Do Step 2" />

Below is the source code, please help as I am losing my last hairs.



// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'HttpHandlers/CampaignHandler.aspx?action=ProcessList&___="+encodeURIComponent((new Date()).getTime()',
method: 'GET'

reader: new Ext.data.XmlReader({
record: 'root'
}, [
{name: 'ID', mapping: 'WorkflowType > @ID'},
{name: 'Description', mapping: 'WorkflowType > @Description'}

var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75,
waitMsgTarget: 'box-bd'


new Ext.form.TextField({
fieldLabel: 'Name',
name: 'campaignName',

new Ext.form.ComboBox({
store: ds,
loadingText: 'Loading...',
width: 190,
triggerAction: 'all',
emptyText:'-- Please Select --',
editable: false,


// explicit add
var submit = fs.addButton({
text: 'Submit',
handler: function(){
fs.submit({url:'xml-errors.xml', waitMsg:'Saving Data...'});


actioncomplete: function(form, action){
if(action.type == 'load'){


9 Aug 2007, 3:44 AM
1) You make us lose hair when you post code w/out php or code tags.
2) Have you looked at the following example indepth?

10 Aug 2007, 2:41 PM
Hey phayes,

Did you ever figure out a solution to this? I am trying to do the exact same thing.

I have a database with a bunch of peoples' names. I want the user to type in the first few letters or use the drop down to select the name they want.

Because the names change frequently, I have a servlet setup to respond to and ajax call with the latest names in the database.

How do I get this into my combo box?

Does anyone have a working XML + Combobox demo they can share?


11 Aug 2007, 4:35 AM

Here's a very simple example that uses XML with a combobox. Note, I'm using an existing HTML form not creating one.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="../yui-ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../yui-ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../yui-ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../yui-ext/ext-all-debug.js"></script>

var TestCBXMLForm = function(){

var frm;
var dsTolerances;
var cbTolerances;

return {
init : function(){

frm = new Ext.BasicForm(Ext.get('cbxmlForm'), {method: 'POST'});

dsTolerances = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '../scripts/GetTolerances.aspx'}),
reader: new Ext.data.XmlReader({record: 'Tolerance', id: '@Id' }, [
{name: 'ToleranceId', mapping: '@Id'},
{name: 'Text', mapping: '@Text'}

cbTolerances = new Ext.form.ComboBox({
store: dsTolerances,
valueField: 'ToleranceId',
displayField: 'Text',
hiddenName: 'ToleranceId',
editable: false,
mode: 'local'

dsTolerances.on('load', function(){
cbTolerances.setValue(1); // select the first item
}, this, {single: true});


submit: function(){
Ext.MessageBox.alert('Value', cbTolerances.getValue());
Ext.onReady(TestCBXMLForm.init, TestCBXMLForm);


<form id="cbxmlForm">
<div><input type="text" name="tolerance" id="tolerance" size="30"></div>
<a href="javascript:TestCBXMLForm.submit()">Test</a>

GetTolerances.aspx will return something like:

<?xml version='1.0' encoding='UTF-8'?>
<Tolerance Id="1" Text="BS5316 Class B No neg" />
<Tolerance Id="2" Text="BS5316 Class C No neg" />
<Tolerance Id="3" Text="BS5316 Class B" />