PDA

View Full Version : How to get text of textfield on button click



dhiraj17
28 Mar 2012, 2:17 AM
I want to get the value of textfield when the user clicks on the save button. The following is my code:

Ext.onReady(function () {
var myForm = Ext.create('Ext.form.Panel', {
title: 'My Form',
width: 500,
height: 300,
renderTo: Ext.getBody(),
items: [
{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
html: 'First Name:      '
},
{
xtype: 'textfield',
width: 150,
name: 'Fname',
id: 'Fname'
}
]
},
{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
html: 'Last Name:       '
},
{
xtype: 'textfield',
width: 150,
name: 'Lname'
}
]
},
{
xtype: 'button',
text: 'Save',
listeners: {
click: function () {
fname = Ext.get('Fname').dom.value;
alert(fname);
}
}
}
]
});

When i click on the save button it alerts 'undefined'. I aslo used Ext.ComponentQuery.query instead of Ext.get().dom.value bt still it alerts 'undefined'.

vietits
28 Mar 2012, 5:14 AM
Ext.onReady(function () {
var myForm = Ext.create('Ext.form.Panel', {
title: 'My Form',
width: 500,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [{
xtype: 'label',
html: 'First Name:      '
},{
xtype: 'textfield',
width: 150,
name: 'Fname',
id: 'Fname'
}]
},{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [{
xtype: 'label',
html: 'Last Name:       '
},{
xtype: 'textfield',
width: 150,
name: 'Lname'
}]
},{
xtype: 'button',
text: 'Save',
listeners: {
click: function () {
// fname = Ext.get('Fname').dom.value;
var fname = myForm.down('textfield[name=Fname]').getValue();
alert(fname);
}
}
}]
});
});

dhiraj17
28 Mar 2012, 8:47 PM
Thanks for the reply. It worked.:)