View Full Version : [FIXED][3.0rc1.1] Grid header in IE6

12 May 2009, 8:47 PM
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.


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


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){
//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

<div style="text-align:center">
<div id='my_id'></div>

12 May 2009, 10:43 PM
Simplified example (only for the current trunk build):

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'}]

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


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

13 May 2009, 4:05 PM
Many thanks! Tell are a bug or not?

13 May 2009, 9:14 PM
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.

9 Jun 2009, 2:09 AM
Fixed in SVN.