1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    iwarner is on a distinguished road

      0  

    Default Referencing Form Elements

    Referencing Form Elements


    Created the following form:

    Code:
    var mileageCreateWindow = new Ext.Window({
            title:'Add a Mileage Log',
            iconCls:'icon-grid',
            width:350,
            height:300,
            layout:'form',
            bodyStyle:'padding:10px',
            labelWidth:100,
            defaults:{anchor:'95%'},
            defaultType: 'textfield',
            closable: false,
            items:[
              {
                xtype:'combo',
                fieldLabel:'Travel Method',
                store:new Ext.data.SimpleStore({
                  fields:['travelMethodValue', 'travelMethodName', 'travelMethodIcon'], data: [['Cycle','Cycle', 'ux-cycle'],['Run','Run', 'ux-run'], ['Walk','Walk', 'ux-walk']]
                 }),
                plugins:new Ext.ux.plugins.IconCombo(),
                valueField: 'travelMethodValue',
                displayField: 'travelMethodName',
                iconClsField: 'travelMethodIcon',
                triggerAction: 'all',
                mode: 'local',
                allowBlank: false,
                selectOnFocus: true,
                forceSelection: true,
                emptyText: 'Select Travel Method..'
              }, {
                fieldLabel: 'Distance (miles)',
                name: 'travelLogDistance',
                allowBlank: false
              },
                new Ext.form.DateField({
                  fieldLabel: 'Date of Travel',
                  name: 'travelLogjourneyDate',
                  width: 190,
                  allowBlank: false
              })
            ],
            buttons: [{
              text: 'Save and Close',
              handler: mileageCreateLog
            },{
              text: 'Close',
              handler: function(){ mileageCreateWindow.hide(); }
            }]
        });
    I wish to then refeerence the items later to create a new row

    I had assumed and from reading examples that I use the name property to reference the getValue() etc... i.e. travelLogDistance.getValue()

    Code:
        // this creates a new president
        function mileageCreateLog()
        {
            if (mileageFormValid()) {
    
                Ext.Ajax.request({
                  waitMsg: 'Please wait...',
                  url: 'logmileage/create',
                  params: {
                    distance: travelLogDistance.getValue(),
                   },
    
                  success: function(response) {
                    var result=eval(response.responseText);
    
                    switch(result) {
                      case 1:
                        Ext.MessageBox.alert('Creation OK', 'The Mileage Log was created successfully.');
                        mileageStore.reload();
                        mileageCreateWindow.hide();
                       break;
    
                      default:
                        Ext.MessageBox.alert('Warning', 'Could not create the Mileage Log.');
                      break;
                    }
                  },
                  failure: function(response){
                    var result = response.responseText;
                    Ext.MessageBox.alert('error', 'could not connect to the database. retry later');
                  }
                });
    
            } else {
                Ext.MessageBox.alert('Warning', 'Your Form is not valid!');
            }
        }
    Appreciate any guidance on this including how I generally have this setup is this the best way to do this?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    What's the question?

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    iwarner is on a distinguished road

      0  

    Default


    How do I reference the Form getValue in the create method

    "I wish to then refeerence the items later to create a new row

    I had assumed and from reading examples that I use the name property to reference the getValue() etc... i.e. travelLogDistance.getValue()"

    Thank you

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    32
    Vote Rating
    0
    iwarner is on a distinguished road

      0  

    Default


    Seems if I do this method:

    I can reference travelMethod.getValue();

    how do I do it in my first post?

    Code:
        travelMethod = new Ext.form.TextField({
            xtype:'combo',
            fieldLabel:'Travel Method',
            store:new Ext.data.SimpleStore({
              fields:['travelMethodValue', 'travelMethodName', 'travelMethodIcon'], data: [['Cycle','Cycle', 'ux-cycle'],['Run','Run', 'ux-run'], ['Walk','Walk', 'ux-walk']]
             }),
            plugins:new Ext.ux.plugins.IconCombo(),
            valueField: 'travelMethodValue',
            displayField: 'travelMethodName',
            iconClsField: 'travelMethodIcon',
            triggerAction: 'all',
            mode: 'local',
            allowBlank: false,
            selectOnFocus: true,
            forceSelection: true,
            emptyText: 'Select Travel Method..'
        });
    
        travelDate = new Ext.form.DateField({
            fieldLabel: 'Date of Travel',
            name: 'travelLogjourneyDate',
            allowBlank: false
        });
    
        travelDistance = new Ext.form.TextField({
            fieldLabel: 'Distance (miles)',
            name: 'travelLogDistance',
            allowBlank: false,
            maxLength: 5,
            maskRe: /([0-9.\s]+)$/
        });
    
        var mileageCreateWindow = new Ext.Window({
            title:'Add a Mileage Log',
            iconCls:'icon-grid',
            width:350,
            height:300,
            layout:'form',
            bodyStyle:'padding:10px',
            labelWidth:100,
            defaults:{anchor:'95%'},
            defaultType: 'textfield',
            closable: false,
            items:[travelMethod, travelDate, travelDistance],
            buttons: [{
              text: 'Save and Close',
              handler: mileageCreateLog
            },{
              text: 'Close',
              handler: function(){ mileageCreateWindow.hide(); }
            }]
        });

Thread Participants: 1