为了给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);
去操作了····
看来 以后 还是要多多阅读源码 ······
随时随地看视频
