PDA

View Full Version : Table column width calculation issue moving from 2.2 to 3.2.1



harperml
30 Jun 2010, 8:12 AM
Hello,

I am moving an application from version 2.2 of ExtJS to 3.2.1 Most everything works fine but I am having an issue with two tables in context. It appears that the calculations for column widths is going wrong. I am using FireFox 3.0.19. I also see problems in IE6 but they manifest differently. When I look at the HTML generated for the table in Firebug, I see a style attribute for each row but it is an empty string. Under 2.2, I see the a width value expressed in the style as I would expect. I am including example code that reproduces the behavior for FireFox (at least 3.0.19). Would anyone care to suggest what is wrong with the code?

Tried to send as attachment but it does not work through my company firewall.

Thank you,
Mike

**** HTML ****
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript">
// reference local blank image
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
</script>
<script type="text/javascript" src="../js/table_test.js"></script>
</head>
<body>
<!-- Insert your content here -->
</body>
<div id="grid-example"></div>
</html>

**** JS ****
Ext.onReady(function(){

sheetTableData = {"rows":[{"min":null,"table":"1","max":null,"tableIndex":1,"id":1,"paramIndex":1,"param":"Gewindeabma▀e:"},
{"min":"7.181","table":"1","max":"7.215","tableIndex":1,"id":2,"paramIndex":2,"param":"Flankendurchmesser"},
{"min":"6.581","table":"1","max":"6.716","tableIndex":1,"id":3,"paramIndex":3,"param":"Kerndurchmesser"},
{"min":"0.16","table":"1","max":"0.191","tableIndex":1,"id":4,"paramIndex":4,"param":"Gewinderadius"}]
};

var sheetTableGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var sheetTableColumns = [ {id: 'table', header: 'Table', width: '6', dataIndex: 'table'}
,{id: 'param', header: 'Parameter Name', width: '50', dataIndex: 'param'}
,{id: 'min', header: 'Default Min', width: '40', dataIndex: 'min'}
,{id: 'max', header: 'Default Max', width: '40', dataIndex: 'max'}
];
Ext.apply(this, {
title: 'Drawing Sheet Table Parameters'
,store: new Ext.data.JsonStore({
root: "rows"
,id: "id"
,fields: [ {name: 'id'}, {name: 'tableIndex'}, {name: 'paramIndex'}
,{name: 'table'} ,{name: 'param'}, {name: 'min'}
,{name: 'max'}
]
})
,columns: sheetTableColumns
,viewConfig: { autoFill: true }
,stripeRows: true
,frame: true
,enableHdMenu: false
}); // eo apply

// call parent
sheetTableGrid.superclass.initComponent.apply(this, arguments);
sheetTableTable = this;

} // eo function initComponent

,onRender:function() {

// call parent
sheetTableGrid.superclass.onRender.apply(this, arguments);

// load the store
this.store.loadData(sheetTableData);

} // eo function onRender

});

Ext.reg('sheettablegrid', sheetTableGrid);

var grid = new sheetTableGrid();

// render the grid to the specified div in the page
grid.render('grid-example');
});