PDA

View Full Version : Percentages: Ext7 Modern Numberfield override with ViewModel Binding Values



rpiwonka
16 Dec 2019, 2:13 PM
Using : Ext 7.0.0.156

I have created a "Percent" field in classic that displays a percent sign in the trigger and accepts decimal numbers from our "server" data and displays the numbers as whole percentages for the user. Also, the user is able to enter 5.05 for a value that gets "saved" as .0505, which is the proper value for a percentage.

In the modern framework the same override(s) don't work since the underlying methods are not the same controlling viewable and stored values.

Which methods do I need to override to get modern to behave like classic and display and enter whole numbers for the "view" and store\get decimals from the view model.

Below is the code that works in classic using two way view model binding on "value". The key methods that make it work as desired are rawToValue and valueToRaw. Modern does not implement these two methods.

Ext.define('AdvCalc.widget.PercentField', {
extend: 'Ext.form.field.Number',
alias: 'widget.percentfield',
hideTrigger: false,
width: 55,
minValue: 0,
maxValue: 100,
spinUpEnabled: false,
spinDownEnabled: false,
value: 0,
allowBlank: false,
selectOnFocus: true,
allowDecimals: true,
allowNegative: false,
forcePrecision: false,
decimalPrecision: 2,
maxLength: 22,
forceMinValue: true,
cls:'percent-field',
isPercentField: function () {
return true;
},
initConfig: function (instanceConfig) {
this.callParent(arguments);
},
initComponent: function () {
this.triggers.spinner.width = 17;
this.triggers.spinner.type = 'trigger';
this.triggers.spinner.hideOnReadOnly = false;
this.triggers.spinner.focusOnMousedown = true;
this.triggers.spinner.repeatClick = false;
this.triggers.spinner.onMouseDown = Ext.emptyFn;
this.triggers.spinner.renderTpl = [
'<div id="{triggerId}" class="{baseCls} {baseCls}-percentSign {extraCls} ',
'{childElCls}"<tpl if="triggerStyle"> style="{triggerStyle}"</tpl>',
'<tpl if="ariaRole"> role="{ariaRole}"<tpl else> role="presentation"</tpl>',
'>',
//'{[values.$trigger.renderBody(values)]}',
'%</div>'
];

this.spinUpEnabled = false;
this.spinDownEnabled = false;
this.keyNavEnabled = false;
this.mouseWheelEnabled = false;

this.callParent(arguments);
},
onTrigger1Click:Ext.emptyFn,
afterRender: function () {
var triggers = this.getTriggers();
triggers.spinner.upEl = triggers.spinner.el;
this.callParent();
},
onSpinnerUpClick: Ext.emptyFn,
onSpinnerDownClick: Ext.emptyFn,
onSpinEnd: Ext.emptyFn,

onDisable: function () {
this.callParent();

var el = this.el;

if (el) {
var span = el.down('td[class="x-trigger-cell"] span');

if (span) {
span.addCls('percentSymbol-disabled');
}
}
},

onEnable: function () {
this.callParent();

var el = this.el;

if (el) {
var span = el.down('td[class="x-trigger-cell"] span');

if (span) {
span.removeCls('percentSymbol-disabled');
}
}
},
rawToValue: function (rawVal)
{
var nVal = this.callParent(arguments);
return "" + nVal / 100;
},
valueToRaw: function (val)
{
var nVal = this.callParent(arguments);
return "" + nVal * 100;
}
});