[FIXED][3.0rc1.1] Grid header in IE6

[Danila_John]

Hello, excuse for my English...

After loading grid in IE6, header it will shift to the right, red rectangles (on creenshots) has marked these areas, after mouseover on it - the header position is restored, a code and screenshots I apply.

Code:


<script>
Ext.BLANK_IMAGE_URL = '/lib/extjs/3.0_rc1.1/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();

var Atr_GridProxy = new Ext.data.HttpProxy({
url: '/lib/extjs/3.0_rc1.1/exchange/proc_data.ephp',
method: 'POST'
});

var Atr_ComboProxy = new Ext.data.HttpProxy({
url: '/lib/extjs/3.0_rc1.1/exchange/proc_data.ephp',
method: 'POST'
});

var Atr_GridReader = new Ext.data.ArrayReader({},[
{name: 'row_num',mapping: 0},
{name: 'atributs_id',mapping: 1},
{name: 'atributs_name',mapping: 2},
{name: 'atributs_value',mapping: 3}
]);

var Atr_ComboReader = new Ext.data.ArrayReader({id: 0},[
{name: 'atributs_id',mapping: 0},
{name: 'atributs_name',mapping: 1}
]);

var Atr_GridStore = new Ext.data.Store({
proxy: Atr_GridProxy,
baseParams: {edit_attributes: "view"},
reader: Atr_GridReader
});

var Atr_ComboStore = new Ext.data.Store({
proxy: Atr_ComboProxy,
baseParams: {combo_get_atr: "view"},
reader: Atr_ComboReader
});

var Atr_RowSel = new Ext.grid.RowSelectionModel({
singleSelect: true
});

var Atr_ComboEditor = new Ext.form.ComboBox({
allowBlank: false,
store: Atr_ComboStore,
displayField: 'atributs_name',
valueField: 'atributs_id',
mode: 'remote',
editable: false,
listClass: 'x-combo-list-small'
});

var Atr_RendererCombo = function(atributs_id){
//Ext.MessageBox.alert('Значение',atributs_id);
//return Atr_Record ? Atr_Record.get('atributs_name') : 'Unknown';
var Atr_Record = Atr_ComboEditor.store.getById(atributs_id);
return Atr_Record.get('atributs_name');
}

var Atr_Columns = new Ext.grid.ColumnModel([
{
header: '№',
dataIndex: 'row_num',
width: 30,
sortable: true,
resizable: false
},{
header: 'Название атрибута',
dataIndex: 'atributs_id',
width: 300,
sortable: true,
editor: Atr_ComboEditor
,renderer: Atr_RendererCombo
},{
header: 'Значение атрибута',
dataIndex: 'atributs_value',
width: 300,
sortable: true,
editor: new Ext.form.TextField({
allowBlank: false
})
}
]);

var Atr_EditorGrid = new Ext.grid.EditorGridPanel({
renderTo: Ext.get('my_id'),
id: 'Atr_EditorGridPanel',
style: 'margin-left:auto;margin-right:auto;text-align:left;',
title: 'Атрибуты доступа',
frame: true,
height: 400,
width: 600,
store: Atr_GridStore,
cm: Atr_Columns,
sm: Atr_RowSel,
clicksToEdit: 1
});

Atr_ComboStore.load();
Atr_GridStore.load();
});
</script>
<div style="text-align:center">
<div id='my_id'></div>
</div>Screenshots:

[Condor]

Simplified example (only for the current trunk build):

Ext.onReady(function(){
new Ext.grid.GridPanel({
renderTo: 'grid',
style: 'text-align: left; margin: 0 auto;',
height: 100,
width: 150,
store: [1, 2, 3],
columns: [{dataIndex: 'field1', header: 'Header'}]
});
});
with:

<div id="grid" style="text-align: center;"></div>

Fix:

<style type="text/css">
.x-grid3-header-offset {text-align: left;}
</style>

[Danila_John]

Many thanks! Tell are a bug or not?

[Condor]

A GridPanel was never designed to be rendered inside a centered element, but since it's done a lot I would say that this should be fixed anyway.

[evant]

Fixed in SVN.