PDA

View Full Version : Form Element Referencing



simon_b
22 Oct 2010, 11:26 AM
Hi,

Here's an easy one, whats the 'Sencha-Touch' recommended way to access form elements? I have had a flick through the API at various getter methods but I seriously think I must be missing a trick as none work for me. For example:

[code]
{
xtype: 'checkbox',
name : 'cool',
label: 'Cool'
}, {
xtype: 'checkbox',
name : 'supercool',
label: 'Super Cool',
listeners: {
check: function(a, b, c)
{
// Want to find out if 'cool' checkbox is selected?
}
}
[code]

So as in above, how according to the Sencha-Touch best practices would you access 'cool' checkbox form element within the check event handler I have in the 'supercool' instance of a checkbox?

Cheer,s

Si

mozicodo
22 Oct 2010, 4:20 PM
Here's how I do my forms:


MyProject.views.MyForm = new Ext.form.FormPanel({
title: 'Test Form',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Input',
items: [{
xtype: 'textfield',
name: 'field1name',
label: 'Field 1'
}]
},
{
xtype: 'fieldset',
title: 'Output',
items: [{
xtype: 'textfield',
name: 'outputfield',
label: 'Output Field'
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Calculate',
ui: 'action',
handler: function() {
var fields = MyProject.views.MyForm.getFields();

var val = fields["field1name"].getValue();

MyProject.views.MyForm.setValues({'outputfield': val});
}
},
{
text: 'Reset',
handler: function() {
MyProject.views.MyForm.reset();
}
}],
}]
});

The Input and Output sections are supposed to cause groups of fields.

simon_b
25 Oct 2010, 8:06 AM
Thanks man that helped a lot!

Riaz
25 Oct 2010, 2:54 PM
hi mozicodo. Nice code.

I have following code and event is not working. What I did wrong?



var MyForm = new Ext.form.FormPanel({
title: 'Test Form',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Input',
items: [{
xtype: 'textfield',
name: 'field1name',
label: 'Field 1'
}]
},
{
xtype: 'fieldset',
title: 'Output',
items: [{
xtype: 'textfield',
name: 'outputfield',
label: 'Output Field'
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Calculate',
ui: 'action',
handler: function() {
var fields = MyForm.getFields();

var val = fields["field1name"].getValue(); //Not getting value of val

MyForm.setValues({'outputfield': val});
}
}
}],
}]
});

Riaz
25 Oct 2010, 3:03 PM
Solved. It is working now.

simon_b
25 Oct 2010, 11:38 PM
Here is what I ended up using to test things out based on mozicodo's post:



Ext.ns('Test', 'Test.views');
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function()
{
Test.views.MyForm = new Ext.form.FormPanel({
fullscreen: true,
title: 'Test Form',
scroll: 'vertical',
items: [
{
xtype: 'textfield',
name: 'field1name',
label: 'Field 1',
listeners: {
keyup: function(eventTarget, eventObject)
{
var fields = Test.views.MyForm.getFields();

var val = fields["field1name"].getValue();
fields["outputfield"].setValue(val);
}
}
},
{
xtype: 'textfield',
name: 'outputfield',
label: 'Output Field'
}
]
})
}
});