Formatting 在ExtJS中以货币形式显示和输入数字

我正在使用ExtJS4.1，并试图将我的货币字段显示为value/1000，但仅显示在屏幕上。 例如，如果用户输入1234.56，它将在屏幕上显示为1234.56，但仅当它显示在屏幕上时。对于其他所有内容，它存储为1234560。在每次计算中，该数字被视为1234560。我使用bigint作为存储，我希望避免浮动，因为在我的国家，20亿是一个正常的数字，但也需要分数部分

你怎么能做到

---

谢谢。

一种方法是创建一个扩展基本文本框的新组件，向其添加一个名为storedValue之类的属性，并注册焦点和模糊事件的处理程序，将存储的值转换为十进制值以进行显示/编辑，然后转换为逗号格式的版本，并用整数值更新存储的值

编辑

刚回去工作，我觉得这段旧代码可能有用。这是我不久前为自己创建的货币字段。父窗体上的侦听器仅适用于具有更新前/更新后事件的窗体的扩展版本。可能有更好的方法可以做到这一点，比如根据应用程序的需要重载getValue、getSubmitValue和getSubmitData函数。我需要的只是显示货币符号和逗号，所以它需要根据您的需要进行修改，但如果您还没有走得太远或遇到任何问题，它应该提供一个不错的起点。祝你好运

Ext.define('Ext.ux.form.field.Currency', {
    extend: 'Ext.form.field.Text',

    alias: 'widget.currencyfield',

    initComponent: function (config) {
        this.callParent(arguments);
    },

    hasFocus: false,

    listeners: {
        render: function () {
            var form = this.findParentByType('form');

            form.on('afterLoadRecord', function () {
                this.toRaw();
                if (this.getRawValue() == 0) {
                    this.setRawValue('');
                } else {
                    this.toFormatted();
                }
            }, this);

            form.on('beforeUpdateRecord', function () {
                this.toRaw();
            }, this);

            form.on('afterUpdateRecord', function () {
                this.toRaw();
                if (this.getRawValue() == 0) {
                    this.setRawValue('');
                } else {
                    this.toFormatted();
                }
            }, this);
        },
        focus: function (field, e, eOpts) {
            this.toRaw();
            this.hasFocus = true;
        },
        blur: function (field, e, eOpts) {
            //Clear out commas and $
            this.toRaw();

            //If there's a value, format it
            if(field.getValue() != '') {
                this.toFormatted();
                this.hasFocus = false;
            }
        }
    },

    stripAlpha: function (value) {
        return value.replace(/[^0-9.]/g, '');
    },

    toRaw: function () {
        if (this.readOnly !== true) {
            this.setRawValue(this.stripAlpha(this.getRawValue()));
        }
    },

    toFormatted: function () {
        this.setRawValue(Ext.util.Format.currency(this.getRawValue(), '$ ', 0));
    },

    getValue: function () {
        return parseFloat(this.stripAlpha(this.getRawValue()));
    }
});

---

一种方法是创建一个扩展基本文本框的新组件，在其中添加一个名为storedValue的属性，并注册焦点和模糊事件的处理程序，将存储值转换为十进制值以进行显示/编辑，然后转换为逗号格式的版本，并用整数值更新存储值

编辑

刚回去工作，我觉得这段旧代码可能有用。这是我不久前为自己创建的货币字段。父窗体上的侦听器仅适用于具有更新前/更新后事件的窗体的扩展版本。可能有更好的方法可以做到这一点，比如根据应用程序的需要重载getValue、getSubmitValue和getSubmitData函数。我需要的只是显示货币符号和逗号，所以它需要根据您的需要进行修改，但如果您还没有走得太远或遇到任何问题，它应该提供一个不错的起点。祝你好运

Ext.define('Ext.ux.form.field.Currency', {
    extend: 'Ext.form.field.Text',

    alias: 'widget.currencyfield',

    initComponent: function (config) {
        this.callParent(arguments);
    },

    hasFocus: false,

    listeners: {
        render: function () {
            var form = this.findParentByType('form');

            form.on('afterLoadRecord', function () {
                this.toRaw();
                if (this.getRawValue() == 0) {
                    this.setRawValue('');
                } else {
                    this.toFormatted();
                }
            }, this);

            form.on('beforeUpdateRecord', function () {
                this.toRaw();
            }, this);

            form.on('afterUpdateRecord', function () {
                this.toRaw();
                if (this.getRawValue() == 0) {
                    this.setRawValue('');
                } else {
                    this.toFormatted();
                }
            }, this);
        },
        focus: function (field, e, eOpts) {
            this.toRaw();
            this.hasFocus = true;
        },
        blur: function (field, e, eOpts) {
            //Clear out commas and $
            this.toRaw();

            //If there's a value, format it
            if(field.getValue() != '') {
                this.toFormatted();
                this.hasFocus = false;
            }
        }
    },

    stripAlpha: function (value) {
        return value.replace(/[^0-9.]/g, '');
    },

    toRaw: function () {
        if (this.readOnly !== true) {
            this.setRawValue(this.stripAlpha(this.getRawValue()));
        }
    },

    toFormatted: function () {
        this.setRawValue(Ext.util.Format.currency(this.getRawValue(), '$ ', 0));
    },

    getValue: function () {
        return parseFloat(this.stripAlpha(this.getRawValue()));
    }
});

---

玩过之后，我有了另一个解决方案，一个基于模型的解决方案。 创建一个不存在的字段，如price_display，并使用它来显示

Ext.define('app.model.PriceSample', {
  extend: 'Ext.data.Model',
  field: [
    {name: 'price', type: 'int'},
    {name: 'price_display', type: 'float', convert: function (value, records) {
      if (value) { //on write
        record.set('price', value * 1000);
        return value;
      } else {
        return record.get('price') / 1000;
      }
    }}
  ]
}

---

在您的网格或组合或任何东西上使用价格显示而不是价格。但当你想做一个数学运算时，使用price

玩过之后，我有了另一个解决方案，一个基于模型的解决方案。 创建一个不存在的字段，如price_display，并使用它来显示

Ext.define('app.model.PriceSample', {
  extend: 'Ext.data.Model',
  field: [
    {name: 'price', type: 'int'},
    {name: 'price_display', type: 'float', convert: function (value, records) {
      if (value) { //on write
        record.set('price', value * 1000);
        return value;
      } else {
        return record.get('price') / 1000;
      }
    }}
  ]
}

---

在您的网格或组合或任何东西上使用价格显示而不是价格。但当你想做一个数学运算时，使用price

好的。。我将检查文档中的模糊和焦点。但我如何处理编辑插件？你是说如何在网格中使用它作为编辑器，并在网格中使用编辑器插件？如果是这样，请确保并扩展一个表单字段，并在为列指定编辑器时为其指定一个自定义的x类型以供引用，它应该可以工作。抱歉，刚刚注意到您在Rudy下面的答案，如果没有用，请忽略它。否。。这是有用的。我可能会用它来操纵输入框。就目前而言，它是同一个数字框，但也许我可以扩展到更多。感谢您的参考。+1对于一个良好的开端-仅供参考，

render

事件可以在表单加载其记录后触发，从而导致格式错误。当窗体使用选项卡组件或具有可折叠区域时，尤其会发生这种情况。因此，在渲染器中，您还需要使用

getRecord（）

检查表单中已加载的记录，并执行

afterLoadRecord

代码，以确保已加载记录的初始格式正确。确定。。我将检查文档中的模糊和焦点。但我如何处理编辑插件？你是说如何在网格中使用它作为编辑器，并在网格中使用编辑器插件？如果是这样，请确保并扩展一个表单字段，并在为列指定编辑器时为其指定一个自定义的x类型以供引用，它应该可以工作。抱歉，刚刚注意到您在Rudy下面的答案，如果没有用，请忽略它。否。。这是有用的。我可能会用它来操纵输入框。就目前而言，它是同一个数字框，但也许我可以扩展到更多。感谢您的参考。+1对于一个良好的开端-仅供参考，

render

事件可以在表单加载其记录后触发，从而导致格式错误。当窗体使用选项卡组件或具有可折叠区域时，尤其会发生这种情况。因此，在渲染器中，还需要使用

getRecord（）

检查表单中已加载的记录，并执行

afterLoadRecord

代码，以确保已加载记录的初始格式正确。