Results 1 to 4 of 4

Thread: Populating Combobox with Ajax call and xml

  1. #1

    Default Populating Combobox with Ajax call and xml

    Hi,

    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.

    <Root>
    <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" />
    </Root>

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

    Ext.onReady(function(){

    Ext.QuickTips.init();

    // 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'
    });

    fs.fieldset(

    {legend:'Information'},
    new Ext.form.TextField({
    fieldLabel: 'Name',
    name: 'campaignName',
    width:190
    }),

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

    );

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

    fs.render('form-ct');

    fs.on({
    actioncomplete: function(form, action){
    if(action.type == 'load'){
    submit.enable();
    }
    }
    });

    });

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    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?
    http://extjs.com/deploy/ext/examples/form/xml-form.html

  3. #3

    Default

    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?

    -Josh

  4. #4
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Joshua/Phayes,

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

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <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>  
      
    <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'
          }); 
          frm.add(cbTolerances);    
          cbTolerances.applyTo('tolerance');              
    
          dsTolerances.on('load', function(){
            cbTolerances.setValue(1); // select the first item
          }, this, {single: true});
          dsTolerances.load();
        
          frm.render('cbxmlForm');
        },  
    
        submit: function(){
          Ext.MessageBox.alert('Value', cbTolerances.getValue());
        }
      };    
    }();   
    Ext.onReady(TestCBXMLForm.init, TestCBXMLForm);
    </script>
      
    </head>
    <body>
    
    <form id="cbxmlForm"> 
      <div><input type="text" name="tolerance" id="tolerance" size="30"></div>
    </form>
    <a href="javascript:TestCBXMLForm.submit()">Test</a>
    </body>
    </html>
    GetTolerances.aspx will return something like:

    Code:
    <?xml version='1.0' encoding='UTF-8'?>
    <Tolerances>
    <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" />
    </Tolerances>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •