View Full Version : Get value from a formpanel,

21 Oct 2010, 6:50 AM
I have a formpanel, but I do not need to submit it to the server side, I just need to get the value of each field after user click the submit button, this is the code?

How to get the value of startdt and enddt?

var dr = new Ext.FormPanel({
title: 'Date Range',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
name: 'startdt',
id: 'startdt',
fieldLabel: 'End Date',
name: 'enddt',
id: 'enddt',

function myHander(){
//here ho get the two datafiled value?

21 Oct 2010, 7:01 AM
You could try something like this.

var myValues = dr.getForm().getValues(),
startdtValue = myValues.get('startdt'),
enddtValue = myValues.get('enddt');

21 Oct 2010, 7:04 AM
try something like

for (var i=0;i < dr.items.length; i++) {
curitem = dr.items[i];
//do whatever you want with it

What I have been doing though is that instead of defining the objects in items[{.. }] using a config object like you did, i'll define the objects above the formpanel code and then place them in the formpanel, similar to

var mycombo = new Ext.form.ComboBox({ ...allsettings here });
var dr = new Ext.FormPanel({ items[mycombo] })

the other thing you could do is just access the items by their id you gave them with Ext.getCmp

var startdate = Ext.getCmp('startdt');
//now use the startdate to pull out the value
var enddate = Ext.getCmp('enddt');
//access this variable now

//do this for all the variables you have

hopefully one of those methods will help

21 Oct 2010, 2:23 PM
I would recommend NOT to use ids and Ext.getCmp as they are global variables, which are evil. Instead use getValues() or getFieldValues() on the form (the former gets the html-style values, the latter gets the Ext-ified values by calling getValue() on each Ext form field) if you want them as an object like {startdt: blah, enddt: blih}. If you want them individually use the ref config option on the item and then look them up from dr:

items: [{fieldLabel: 'Start Date',
name: 'startdt',
ref: 'startdt'}, ...

in the handler: