PDA

View Full Version : [UNKNOWN][3.1] LockingGridView + syncHeight + cells with different heights



paolocavelli
23 Dec 2009, 8:25 AM
If in the grid there are cells with different heights, I have problems even if I set syncHeights to true.

Problem 1: "big" cell in the right part: wrong vertical alignment in the left part
http://www.mostmail.eu/MOSTDOC/snap1.png


Problem 2: "big" cell in left part: cells in the right part with wrong height
http://www.mostmail.eu/MOSTDOC/snap2.png

mystix
23 Dec 2009, 10:15 AM
[ moved to a new thread ]
because

the other thread was already marked [FIXED]
the issue being reported here has absolutely nothing to do with that reported in the other thread



@paolocavelli: as mentioned in 71015, could you please post a simple test case demonstrating this issue? thanks.

paolocavelli
7 Jan 2010, 8:42 AM
Example:


<HTML>
<HEAD>
<TITLE>Title</TITLE>
<link rel='stylesheet' type='text/css' href='js/ext-3.1.0/resources/css/ext-all.css' />
<link rel='stylesheet' type='text/css' href='js/ext-3.1.0/examples/ux/css/LockingGridView.css' />
<script type='text/javascript' src='js/ext-3.1.0/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='js/ext-3.1.0/ext-all-debug.js'></script>
<script type='text/javascript' src='js/ext-3.1.0/examples/ux/LockingGridView.js'></script>
<style>
.x-grid3-row td, .x-grid3-summary-row td { vertical-align:middle; }
</style>
</HEAD>
<BODY CLASS=me_class>
<SCRIPT type='text/javascript'>

function docRenderer(logical_id, p, record, rowIndex, colIndex) {
var htmlcode = '<img src="html?my_get_icon.extjs" />';
return htmlcode;
}

Ext.onReady(function(){

Ext.QuickTips.init();

var dataProxy = new Ext.data.HttpProxy({
url: 'html?my_do_query.extjs+dummy'
});
gridStore = new Ext.data.Store({
remoteSort: true,
autoLoad: false,
proxy: dataProxy,
reader: new Ext.data.JsonReader()
});
var selectionModel = new Ext.grid.CheckboxSelectionModel({
singleSelect: false
});
var columnModel = new Ext.ux.grid.LockingColumnModel([
selectionModel,
{ header:'ID', dataIndex:'ID', width:70, sortable:true ,align:'right' , editor: new Ext.form.NumberField({allowDecimals: false , allowBlank: false}) },
{ header:'CD', dataIndex:'NOME_CD', width:100, sortable:true , editor: new Ext.form.TextField({ dummy: true }) },
{ header:'Medium Resolution', dataIndex:'MED_RES', width:150, sortable:false ,align:'center',renderer:docRenderer },
{ header:'Date', dataIndex:'DATA', width:70, sortable:true ,renderer:Ext.util.Format.dateRenderer('d/m/Y') , editor: new Ext.form.DateField({ format: 'd/m/Y' }) }
]);

gridPanel = new Ext.grid.EditorGridPanel({
cls: 'gridPanel',
region:'center',
title: 'grid',
id: 'me_gridPanel',
visible: true,
border: true,
stripeRows: true,
colModel: columnModel,
monitorResize: true,
store: gridStore,
frame: true,
clicksToEdit: 2,
trackMouseOver: false,
loadMask: false,
view: new Ext.ux.grid.LockingGridView({
syncHeights: true
})
});

var win = new Ext.Viewport ({
id: 'xme_win',
layout: 'border',
layoutConfig: {
minWidth: 800,
minHeight: 600
},
items:[
gridPanel
]
});

gridStore.load();
});
</SCRIPT>
</BODY>
</HTML>
html?my_do_query.extjs+dummy response


{
metaData: {
root: 'records',
id: 'MOSTDOC__KEY',
totalProperty: 'totalCount',
fields: [
'MOSTDOC__KEY',
{name:'ID',type:'int'},
'NOME_CD',
'MED_RES',
{name:'DATA',type:'date',dateFormat:'d/m/Y'}
]
},
success: true,
sort: '',
dir: '',
totalCount: 2,
G_do_alert: 0,
records: [
{
'MOSTDOC__KEY':'3AB7460F010B1D0025',
'ID':'13',
'NOME_CD':'001',
'MED_RES':'3AB74610010B1D0026',
'DATA':'26/09/1999'
},{
'MOSTDOC__KEY':'3AB74631010B1D002E',
'ID':'16',
'NOME_CD':'001',
'MED_RES':'3AB74632010B1D002F',
'DATA':'26/09/1999'
}
]
}


html?my_get_icon.extjs returns a 140x142 jpeg image