我有一个Ext.Grid.EditorGridPanel的问题，我目前正在使用ExtJS 2.3.0，无法更改。 ： - （
问题出现后：
我创建了一个由2个FormPanel组成的窗口，它们之间是EditorGridPanel。 对于网格的viewConfig，只设置了“forceFit = true”，并且没有为ColumnModel设置样式或视图选项。 仅对每列，对齐选项设置为“中心”。 ColumnModel由13列组成，或多或少只有文本。 现在我用浏览器打开我正在使用的网站并打开窗口来测试GUI。 当我尝试在单行中的单元格之间切换时，整个数据行向左移动， 这样就不再显示第一个细胞了。 向网格添加新行（通过添加按钮）后，视图将重置，并且每列的所有单元格都会再次正确显示。 列标题和tbar是固定的，并且始终正确呈现。
问题出现在IExplorer 8.0x，一个较旧的Firefox版本（2.0x），但网格适用于Firefox 3.6x和Safari 5.0x。 如果有人有类似的问题，并得到修复或想法可能导致该问题，请随时回答。 ;-) 提前谢谢了！
[编辑] 请注意，这里有一些来自完整来源的修改来源：
getTypeSelectionGrid: function() {
this.gridRecord: Ext.data.Record.create([
{name:'id', type:'int'},
{name:'start', type:'string'},
{name:'end', type:'string'},
{name:'mo', type:'boolean'},
{name:'tu', type:'boolean'},
{name:'we', type:'boolean'},
{name:'th', type:'boolean'},
{name:'fr', type:'boolean'},
{name:'sa', type:'boolean'},
{name:'su', type:'boolean'},
{name:'type', type:'string'}
]);
this.gridStore = new Ext.data.Store({
baseParams: {
},
sortInfo: {field: 'id', direction: 'ASC'},
proxy: new Ext.data.HttpProxy({
url: '',
method: 'post'
}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'id'
}, this.gridRecord)
});
var sm = new Ext.grid.RowSelectionModel({ singleSelect: true });
var columnConfig = [];
//auto incremented id column
columnConfig.push({
header: 'id',
dataIndex: 'id',
width: 50,
editor: new Ext.form.TextField({
anchor: '100%',
allowBlank: false,
disabled: true
})
});
//start value for time range, values from '00:00' to '24:00' steps by second, here shorted to 2 options
columnConfig.push({
header: 'start',
dataIndex: 'start',
width: 70,
align: 'center',
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['val', 'txt'],
data : [['00:00', '00:00'],['24:00', '24:00']]
}),
displayField: 'txt',
valueField: 'val',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
saveRouting: true,
forceSelection: true,
anchor: '100%',
allowBlank: false
})
});
//same as above for end of time range, dataIndex 'end'
//now 7 checkbox columns foreach weekday
columnConfig.push({
xtype: 'checkcolumn',
header: 'mo',
dataIndex: 'mo',
align: 'center',
width: 30
}));
//same as above for dataIndex 'tu', 'we', 'th', 'fr', 'sa' and 'su'
//here simplified to SimpleStore, originally a remote store which gets the data
//by a HttpProxy
columnConfig.push({
header: 'type',
dataIndex: 'type',
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['val', 'txt'],
data : [[1, 'type 1'],[2, 'type 2']]
}),
displayField: 'txt',
valueField: 'txt',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
saveRouting: true,
forceSelection: true,
anchor: '100%',
allowBlank: false
})
});
//then 2 plugins which have some functionality for the selected row
//grid tested with and without both plugins, they are not the cause
var cm = new Ext.grid.ColumnModel(columnConfig);
cm.defaultSortable = false;
//now the grid
this.typeSelectionGrid = new Ext.grid.EditorGridPanel({
store: this.gridStore,
clicksToEdit: 1,
autoHeight: true,
cm: cm,
sm: sm,
viewConfig: {
forceFit: true
},
tbar: [{
text: 'add new row',
cls: 'x-btn-text',
scope: this,
handler: function(){
//adds a row with incremented id
}
}],
listeners: {
scope: this,
show: function() {
sm.selectFirstRow.defer(1000, selectionModel);
}
}
});
return this.typeSelectionGrid;
},
//the grid is then inserted between the Panels into the window component
//looks something like that
render: function() {
var layoutFn = function(pnl) {
pnl.ownerCt.ownerCt.doLayout.defer(Ext.isIE ? 300 : 0, pnl.ownerCt.ownerCt);
pnl.doLayout.defer(Ext.isIE ? 500 : 200, pnl);
};
this.cardLayout.add({
layout: 'border',
border: false,
bodyStyle: 'background-color: #fff',
items: [
{
region: 'center',
border: false,
layout: 'column',
autoScroll: true,
defaults: {
columnWidth: 1,
bodyStyle: 'padding: 5px;',
border: false,
autoHeight: true,
layout: 'column',
defaults: {
columnWidth: 1
}
},
items: [
//first Ext.form.FormPanel with some TextFields
{
items: {
listeners: {
expand: layoutFn,
collapse: layoutFn
},
frame: true,
title: 'panel with a grid',
collapsible: true,
titleCollapse: true,
layout: 'fit',
autoHeight: true,
items: this.getTypeSelectionGrid()
}
}
//second Ext.form.FormPanel with some TextFields
]
}
]
});
}
答案 0 :(得分：2)
首先，看起来您有一些JavaScript语法错误。我知道你只发布了一段你的代码，但试着通过JS Lint运行整个事情。
首先：
this.gridRecord: Ext.data.Record.create([
{name:'id', type:'int'},
{name:'start', type:'string'},
{name:'end', type:'string'},
{name:'mo', type:'boolean'},
{name:'tu', type:'boolean'},
{name:'we', type:'boolean'},
{name:'th', type:'boolean'},
{name:'fr', type:'boolean'},
{name:'sa', type:'boolean'},
{name:'su', type:'boolean'},
{name:'type', type:'string'}
]);
应该是：
this.gridRecord = Ext.data.Record.create([
虽然我不完全确定这会导致问题，但我发现你的列配置有宽度分配给它们。即使您将viewConfig属性设置为“forceFit：true”，我怀疑编辑器可能会尝试使用您为每列设置的宽度。
看看是否能清除任何东西。
答案 1 :(得分：0)
谢谢，但代码片段有一个复制和粘贴错误，gridRecord是原始代码的全局属性。 我忽略了这一点，因为我修改了代码，抱歉让人感到困惑。
现在我尝试了你的建议并找到了罪魁祸首： 似乎IE根本无法处理“forceFit”选项，我评论了该选项和 设置每列的宽度......它工作正常，没有列移动！ 不，我插入了一个解决方法，首先我检查浏览器是否是IE，如果不是“forceFit”选项设置为“true”，否则为“false”。
非常感谢您的帮助！