第一次玩ExtJs的坑

为了给Ext表格对象里面的一列加上一个onchange事件，经历了太多的坑了
第一次网上搜寻复制的代码：

{
                header: "计划金额",
                dataIndex: 'planamount',
                align: 'right',
                xtype: 'numbercolumn',
                //  format:'0,000.00',
                editor: {xtype: 'numberfield', hideTrigger: true, minValue: 0, allowDecimals: true},
                summaryType: 'sum',
                summaryRenderer: function (value, summaryData, dataIndex) {
                    return '<strong>' + Ext.util.Format.number(value, '0,000.00') + '</strong>';
                },
        //正常的change事件添加
                **listeners : {
                    change : function(a, newV, oldV){
                        alert(newV+'---'+'oldValue');
                    }
                }**

            }

然而，页面一直没效果······
然后 在别的列加上onchange事件是可以执行的：

  xtype: 'textfield', // 附件key
                name: 'payamount',
                allowDecimals: true,
                decimalPrecision: 2,
                fieldStyle: 'background:#DCDCDC',
                fieldLabel: '应付金额',
                readOnly: true,
                id: 'approval',
                anchor: '90%',
                listeners: {
                    //这里居然可行
                    **change: function (a, newV, oldV) {
                        Ext.getCmp('daily_apply_amountShow').setValue('￥' + (Ext.util.Format.number(newV, '0,000.00')));
                        Ext.getCmp('daily_writeoff_amountShow').setValue('￥' + (Ext.util.Format.number(newV, '0,000.00')));
                    }**
                }
            }

对比了 一下代码，估计是xtype的原因，可能我要增加的那一列是numbercolumn，而listener里面的onchange必需xtype为textfield才能运行，后来在同事的协助下终于发现原来自己公司的extjs封装文件里面对xtype为numbercolumn的editor进行了封装，并且 change事件就是要写在这个属性里面，而不是listeners里面（捂脸）。

{
                header: "计划金额",
                dataIndex: 'planamount',
                align: 'right',
                xtype: 'numbercolumn',
                //  format:'0,000.00',
                editor: {
                    xtype: 'numberfield', hideTrigger: true, minValue: 0, allowDecimals: true,
                    //是的 要这样玩
                    **onChange: function () {
                        var selections = entryInfo_grid.getSelectionModel();
                        var selectData = selections.getSelection()[0];
                        var rowIndex = entryInfoStore.indexOf(selectData);
                        var planamount = entryInfoStore.getAt(rowIndex).get("planamount");
                        var payamount=entryInfoStore.getAt(rowIndex).get("payamount");
                        entryInfoStore.getAt(rowIndex).set("balance",payamount- planamount);
                    }**
                },
                summaryType: 'sum',
                summaryRenderer: function (value, summaryData, dataIndex) {
                    return '<strong>' + Ext.util.Format.number(value, '0,000.00') + '</strong>';
                }
            }

封装文件里面：

Ext.define("Ext.form.field.Number", {
            extend : "Ext.form.field.Spinner",
            alias : "widget.numberfield",
            alternateClassName : ["Ext.form.NumberField", "Ext.form.Number"],
            allowDecimals : true,
            decimalSeparator : ".",
            submitLocaleSeparator : true,
            decimalPrecision : 2,
            minValue : Number.NEGATIVE_INFINITY,
            maxValue : Number.MAX_VALUE,
            step : 1,
            minText : "The minimum value for this field is {0}",
            maxText : "The maximum value for this field is {0}",
            nanText : "{0} is not a valid number",
            negativeText : "The value cannot be negative",
            baseChars : "0123456789",
            autoStripChars : false,
            initComponent : function() {
                var a = this, b;
                a.callParent();
                a.setMinValue(a.minValue);
                a.setMaxValue(a.maxValue);
                if (a.disableKeyFilter !== true) {
                    b = a.baseChars + "";
                    if (a.allowDecimals) {
                        b += a.decimalSeparator
                    }
                    if (a.minValue < 0) {
                        b += "-"
                    }
                    b = Ext.String.escapeRegex(b);
                    a.maskRe = new RegExp("[" + b + "]");
                    if (a.autoStripChars) {
                        a.stripCharsRe = new RegExp("[^" + b + "]", "gi")
                    }
                }
            },
            getErrors : function(c) {
                var b = this, e = b.callParent(arguments), d = Ext.String.format, a;
                c = Ext.isDefined(c) ? c : this.processRawValue(this
                        .getRawValue());
                if (c.length < 1) {
                    return e
                }
                c = String(c).replace(b.decimalSeparator, ".");
                if (isNaN(c)) {
                    e.push(d(b.nanText, c))
                }
                a = b.parseValue(c);
                if (b.minValue === 0 && a < 0) {
                    e.push(this.negativeText)
                } else {
                    if (a < b.minValue) {
                        e.push(d(b.minText, b.minValue))
                    }
                }
                if (a > b.maxValue) {
                    e.push(d(b.maxText, b.maxValue))
                }
                return e
            },
            rawToValue : function(b) {
                var a = this.fixPrecision(this.parseValue(b));
                if (a === null) {
                    a = b || null
                }
                return a
            },
            valueToRaw : function(c) {
                var b = this, a = b.decimalSeparator;
                c = b.parseValue(c);
                c = b.fixPrecision(c);
                c = Ext.isNumber(c) ? c : parseFloat(String(c).replace(a, "."));
                c = isNaN(c) ? "" : String(c).replace(".", a);
                return c
            },
            getSubmitValue : function() {
                var a = this, b = a.callParent();
                if (!a.submitLocaleSeparator) {
                    b = b.replace(a.decimalSeparator, ".")
                }
                return b
            },
                        //就是这里
            **onChange : function() {
                this.toggleSpinners();
                this.callParent(arguments)
            },**
            toggleSpinners : function() {
                var b = this, c = b.getValue(), a = c === null;
                b.setSpinUpEnabled(a || c < b.maxValue);
                b.setSpinDownEnabled(a || c > b.minValue)
            },
            setMinValue : function(a) {
                this.minValue = Ext.Number.from(a, Number.NEGATIVE_INFINITY);
                this.toggleSpinners()
            },
            setMaxValue : function(a) {
                this.maxValue = Ext.Number.from(a, Number.MAX_VALUE);
                this.toggleSpinners()
            },
            parseValue : function(a) {
                a = parseFloat(String(a).replace(this.decimalSeparator, "."));
                return isNaN(a) ? null : a
            },
            fixPrecision : function(d) {
                var c = this, b = isNaN(d), a = c.decimalPrecision;
                if (b || !d) {
                    return b ? "" : d
                } else {
                    if (!c.allowDecimals || a <= 0) {
                        a = 0
                    }
                }
                return parseFloat(Ext.Number.toFixed(parseFloat(d), a))
            },
            beforeBlur : function() {
                var b = this, a = b.parseValue(b.getRawValue());
                if (!Ext.isEmpty(a)) {
                    b.setValue(a)
                }
            },
            onSpinUp : function() {
                var a = this;
                if (!a.readOnly) {
                    a.setValue(Ext.Number.constrain(a.getValue() + a.step,
                            a.minValue, a.maxValue))
                }
            },
            onSpinDown : function() {
                var a = this;
                if (!a.readOnly) {
                    a.setValue(Ext.Number.constrain(a.getValue() - a.step,
                            a.minValue, a.maxValue))
                }
            }
        });

ps：
然后接下来还发现用this.value可以获取被change过的列的值，但是第二次就不能选中去change，这个很是奇怪，所以最后还是用

var selections = entryInfo_grid.getSelectionModel();
                        var selectData = selections.getSelection()[0];
                        var rowIndex = entryInfoStore.indexOf(selectData);
                        var planamount = entryInfoStore.getAt(rowIndex).get("planamount");
                        var payamount=entryInfoStore.getAt(rowIndex).get("payamount");
                        entryInfoStore.getAt(rowIndex).set("balance",payamount- planamount);

去操作了····

看来 以后 还是要多多阅读源码 ······