In this example we are trying to force Decimal precision to 2 positions. To achieve that we extend the Ext.form.NumberField to define a custom NumberField and override the following 2 methods
Source for MyNumberField.js
Ext.define('SA.view.MyNumberField', {
extend: 'Ext.form.NumberField',
alias : 'widget.mynumberfield',
initComponent: function() {
this.callParent(arguments);
},
setValue : function(v){
v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(".", this.decimalSeparator));
return Ext.form.NumberField.superclass.setRawValue.call(this, v);
},
onSpinUp: function() {
var me = this;
if (!me.readOnly) {
var val = parseFloat(me.step);
if(me.getValue() !== '') {
val = parseFloat(me.getValue());
me.setValue((val + parseFloat(me.step)));
}
}
},
fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
return parseFloat(value).toFixed(this.decimalPrecision);
}
});
Tip: If you would like to format the numberfield in some other way , then just modify the fixPrecision function. The setValue function is just checking for a valid numeric value and then calling the fixPrecision function which returns the formatted value.
Source for index.html
<html>
<head>
<title>Force Decimal Input in Forms</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Source for app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SA',
appFolder: 'app',
controllers: [
'Samples'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
items: [
{
xtype: 'myform',
anchor: '50% 20%'
}
]
});
}
});
Source for Edit.js
Ext.define('SA.view.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.itemedit',
title : 'Edit Information',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = this.buildItems();
this.buttons = this.buildButtons();
this.callParent(arguments);
},
buildItems: function(){
return [
{
xtype: 'form',
items: [
{
xtype: 'displayfield',
itemId: 'itemNumber',
fieldLabel: 'Item Number'
},
{
xtype: 'mynumberfield',
itemId: 'weight',
name : 'weight',
fieldLabel: 'Weight',
decimalPrecision:2,
step:0.01
}
]
}
];
},
buildButtons: function(){
return [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
}
});
Source for Display.js
Ext.define('SA.view.Display' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.myform',
title: 'Force Decimal Input',
items: [
{
xtype: 'displayfield',
value: 'ABC',
itemId: 'itemNumber',
fieldLabel: 'Item Number'
},
{
xtype: 'displayfield',
value: 11.00,
itemId: 'weight',
fieldLabel: 'Weight'
}
],
buttons: [{
text: 'Edit',
action: 'edit'
}]
});
Source for Samples.js
Ext.define('SA.controller.Samples', {
extend : 'Ext.app.Controller',
views : ['Display','Edit','MyNumberField'],
refs: [{
ref: 'myDisplayForm',
selector: 'myform'
}],
init : function() {
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'myform button[action=edit]' : {
click : this.editItem
},
'itemedit button[action=save]' : {
click : this.updateItem
}
});
},
onPanelRendered : function() {
console.log('The panel was rendered');
},
editItem : function(button) {
console.log('Edit button was clicked');
var panel = button.up('panel');
itemNumber = panel.getComponent('itemNumber').getValue();
weight = panel.getComponent('weight').getValue();
console.log(itemNumber);
console.log(weight);
var myWindow = Ext.widget('itemedit');
var editpanel = myWindow.down('form');
editpanel.getComponent('itemNumber').setValue(itemNumber);
editpanel.getComponent('weight').setValue(weight);
},
updateItem : function(button) {
var win = button.up('window');
form = win.down('form');
var panel = this.getMyDisplayForm();
panel.getComponent('weight').setValue(form.getComponent('weight').getValue());
win.close();
}
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.