Extjs之rowEditing编辑状态时列不对齐

Extjs在使用rowEditing的时候，会在每一列加上editor属性，表示当处于编辑状态时这一列的值是什么类型的，后突然发现在rowEditing处于编辑状态时每一列的宽度边框了，如果列数非常多的话会出现列向后推，知道最后一列被隐藏或是看不到，当然通过tan键是可以到最后的，但是处于编辑状态的列与上面的列名不相互对应了，出现了列不齐的状况，如下图：

未编辑前：



双击处于编辑状态：



很明显的看到每一列都不对应了，解决这个问题的办法就是在每一列的editor属性上面加上maxWidth这个配置，加上之后效果如下：



源码：

var haomglGeimjGrid = Ext.create('Ext.grid.Panel', {
id: 'haomglGeimjGrid',
name: 'haomglGeimjGrid',
width: panelWidth,
height: 120,
store: haomglGeimjGrid_store,
header: false,
columnLines : true,
selModel: selModelGeimj,
autoScroll : true,
selType: 'cellmodel',
plugins: [rowEditingGeimj],
columns: [{
xtype: 'gridcolumn',
dataIndex: 'name',
width: 100,
align: 'center',
header:'<div style=" text-align: center; vertical-align: middle;">给煤机</div>',
text: 'String',
emptyCellText: '耗煤量（吨）',
editor: {
xtype: 'textfield',
maxWidth: 90,
width: 90,
readOnly: true,
value: '耗煤量（吨）',
emptyText: '耗煤量（吨）'
}
}, {
xtype: 'gridcolumn',
text: '#7号机组',
header:'<div style=" text-align: center; vertical-align: middle;">#7号机组</div>',
columns: [{
xtype: 'numbercolumn',
dataIndex: 'geimj_7_a',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">A</div>',
text: 'A',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_7_b',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">B</div>',
text: 'B',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_7_c',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">C</div>',
text: 'C',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_7_d',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">D</div>',
text: 'D',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_7_e',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">E</div>',
text: 'E',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_7_f',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">F</div>',
text: 'F',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}]
}, {
xtype: 'gridcolumn',
text: '#8号机组',
header:'<div style=" text-align: center; vertical-align: middle;">#8号机组</div>',
columns: [{
xtype: 'numbercolumn',
dataIndex: 'geimj_8_a',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">A</div>',
text: 'A',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_8_b',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">B</div>',
text: 'B',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_8_c',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">C</div>',
text: 'C',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_8_d',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">D</div>',
text: 'D',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_8_e',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">E</div>',
text: 'E',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}, {
xtype: 'numbercolumn',
dataIndex: 'geimj_8_f',
align: 'center',
width: 85,
header:'<div style=" text-align: center; vertical-align: middle;">F</div>',
text: 'F',
editor : {
xtype : 'numberfield',
maxWidth: 80,
width: 80,
allowBlank : true,
minValue : 0
}
}]
}, {
xtype: 'actioncolumn',
align: 'center',
width:30,
items: [{
cls : "x-btn-text-icon",
icon: '../images/extjs/application_edit.png',
tooltip: '编辑',
handler: function(haomgl_grid, rowIndex, colIndex) {
var date = Ext.getCmp('statdate').getValue();
var nowdate = new Date();
var year = nowdate.getFullYear();
var month = nowdate.getMonth();
var day = nowdate.getDate();
var currentdate = new Date(year, month, day);
if(date >= currentdate){
rowEditingGeimj.startEdit(rowIndex, 0);
}
}
}]
}]
});