PDA

View Full Version : Form with



angelox
31 Oct 2011, 12:55 AM
Hi,
I have a form with 3 field with xtype: 'numberfield':
number1
number2
number3
Number3 must be the product of number1 and number2.
Someone help me know about?
Thanks.

twaindev
31 Oct 2011, 7:28 AM
Here's an example using Ext JS 4:

Ext.onReady(function() {

Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),

width: 320,
height: 240,

title: 'My First Calculator',

bodyPadding: 10,

layout: 'anchor',

defaults: {
xtype: 'numberfield',
value: 0
},

items: [
{
id: 'number1',
fieldLabel: 'Value 1',
listeners: {
change: function() {
this.up('window').calculate();
}
}
},
{
id: 'number2',
fieldLabel: 'Value 2',
listeners: {
change: function() {
this.up('window').calculate();
}
}
},
{
id: 'number3',
fieldLabel: 'Result',
readOnly: true
}
],

calculate: function() {
var me = this,
a = me.child('[id=number1]').getValue() || 0,
b = me.child('[id=number2]').getValue() || 0;

me.child('[id=number3]').setValue(a * b);
}
}).show();

});

angelox
1 Nov 2011, 7:47 AM
Hello, thanks for the comprehensive example.
Unfortunately, integrating your script in mine, something is not working.
Consider that only a few months that I delight in javascript.
In the web console, I get the following error:

this.up ("window") is undefined

Here is my code:

var rigaForm = Ext.create('Ext.form.Panel', {
layout: 'anchor',
frame: true,
title: 'Riga',
bodyPadding: 3,
dockedItems: [{ xtype: 'toolbar', dock: 'bottom', items: ['Testo']}],
defaults: {
anchor: '100%'
},

items: [{
margin: '0 0 0 3',
xtype: 'fieldset',
title:'Anagrafica',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
fieldDefaults: { labelAlign: 'left', labelWidth: 240, anchor: '100%', msgTarget: 'side' },
items: [{
fieldLabel: 'Codice',
readOnly: true,
name: 'CODART'
},{
fieldLabel: 'Descrizione',
readOnly: true,
name: 'DESCRIZIONE'
},{
fieldLabel: 'Cat.',
readOnly: true,
name: 'CAT'
}]
},{
xtype: 'fieldset',
title:'Quantita',
layout: 'anchor',
defaults: {
anchor: '50%',
xtype: 'numberfield',
value: 0
},
items: [
{
id: 'number1',
fieldLabel: 'Value 1',
listeners: {
change: function() {
this.up('window').calculate();
}
}
},
{
id: 'number2',
fieldLabel: 'Value 2',
listeners: {
change: function() {
this.up('window').calculate();
}
}
},
{
id: 'number3',
fieldLabel: 'Result',
readOnly: true
}
],

calculate: function() {
var me = this,
a = me.child('[id=number1]').getValue() || 0,
b = me.child('[id=number2]').getValue() || 0;

me.child('[id=number3]').setValue(a * b);
}
}]
});

twaindev
1 Nov 2011, 12:59 PM
Since your fields and function are in a fieldset instead of a window, just use

this.up('fieldset').calculate();

angelox
1 Nov 2011, 1:47 PM
Perfect. You were very kind. You certainly disturb other small things.
Greetings.