PDA

View Full Version : Column resize alignment problem



renganathan
24 May 2012, 8:54 PM
Hi all,

I am facing alignment problem while column has been re-sized, when i did scrolling

Please refer below screen shot for better understanding of this issue.

This is the screen shot of the normal grid(without any column resizing & without scrolling)

35608


After column Resizing (without scrolling)


35609


This is the screen shot of the normal grid(without any column resizing & with scrolling)


35610



After column resizing with scrolling - here is the problem


35611

Please see the header alignment

scottmartin
25 May 2012, 2:13 PM
Please specify the exact version of ExtJS4 you are using?

Scott.

renganathan
28 May 2012, 6:22 AM
Extjs 4.1

scottmartin
28 May 2012, 10:06 AM
Are you performing any custom HTML rendering of your data in your columns? If you remove the renderers for your grid, does this help? How about changing making the headers single line?
(even if for testing)

You may have to create a small working demo so we can see review the problem.

Scott.

renganathan
28 May 2012, 11:32 PM
Hi ,

I have shared my code .Please refer the below code



var AdminDevicePanel = new Ext.grid.GridPanel(
{

id : 'TermsvrDevicePanel',
title : 'Terminal Servers',
autoWidth : true,
width : '100%',
autoHeight : true,
autoScroll : true,
store : deviceStore,
viewConfig : {emptyText: GridEmptyTextMsg,enableTextSelection: true},
stateful: false,
features : [ myFilters],
columns :
[
{id:'tms_lab_name', header: "Lab", sortable: false, dataIndex: 'lab_name', width: LAB_WIDTH,
renderer: function (val, meta, record)
{
var paramsList = "'"+record.get('ulid')+"'";
return '<a title="Click to display lab details" href="javascript:void(0);" onclick=displayLabDetails('+paramsList+');>'+val+'</a>';
}
},
{id:'tms_aisle', header: "Aisle", sortable: false, dataIndex: 'aisle',width: 50},
{id:'tms_aisle_location', header: "Aisle Location", sortable: false, dataIndex: 'aisle_location',width: 50},
{id: 'tms_ip_address', header: "IP Address", sortable: true, dataIndex: 'ip_address',width: 80,
renderer: function (val, meta, record)
{
var deviceip = "'"+val+"'";
var devid = record.get('id');
var ip = record.get('ip_address');
var port = record.get('port');
return '<a title="click to view device details" href="javascript:void(0);" onclick=displaydeviceDetails("'+ip+'","'+port+'","'+devid+'");>'+val+'</a>';//return '<a href="#">'+val+'</a>';

}},
{id:'tms_testbed', header: "Testbeds", sortable: false, dataIndex: 'testbed', renderer: columnWrap,

renderer: function (val, meta, record)
{
var spl_val = val.split(',');
var tid = record.get('testbeds_id_ref')
if(tid)
{
var tesbid = tid.split(',');

var return_value ='';
for(i=0;i<spl_val.length;i++)
{

var paramsList = "'"+tesbid[i]+"'"+",'"+spl_val[i]+"'";
return_value +='<a title="Click to see testbed details" href="javascript:void(0);" onclick="displayTestbedDetails('+paramsList+');">'+val+'</a>';


if(i!=spl_val.length-1)return_value += ',';
}
}
return return_value;
}
},
{id: 'tms_name', header: "Hostname", sortable: true, dataIndex: 'name',width: 100},
{id: 'tms_pid', header: "Pid", sortable: true, dataIndex: 'pid',width: 100},
{id: 'tms_description', header: "Description", sortable: true, dataIndex: 'description',width:110},
{id: 'tms_sl_num', header: "Serial Number", sortable: true, dataIndex: 'sl_num',width: 80,

renderer: function (val, meta, record)
{
if (!!val)
{
var deviceSlnum = "'"+val+"'";
return '<a title="View device details in eITMS for this serial number" href="javascript:void(0);" onclick=displayEitmsDetails('+deviceSlnum+');>'+val+'</a>';
}
}

},
{id: 'tms_eitms_num', header: "eITMS Number", sortable: true, dataIndex: 'eitms_num',width: 80},
{id: 'tms_status', header: "Status", sortable: true, dataIndex: 'status',width: 50,

renderer: function (val, meta, record)
{
if(val)
{
var SrcImage;
if(val == "active")
{
SrcImage = "<font color='green'>"+val+"</font>";
}
else
{
SrcImage = '<font color="red">'+val+'</font>';
}
return SrcImage;
}
},
filter: {type: 'list', options: [['active','Active'], ['inactive','Inactive'],['rommon','Rommon'],['poweroff','Poweroff'], ], phpMode: true}


},

{id: 'tms_t_DND_flag', header: "DND Status", sortable: true, dataIndex: 'dnd_flag',width: 70,

renderer: function (val, meta, record)
{
var SrcImage;
if(val == 1)
{

SrcImage = "<font color='green'>Enable</font>";
}
else
{

SrcImage = '<font color="red">Disable</font>';

}

return SrcImage;
},
filter: {type: 'list', options: [['1','Enable'], ['0','Disable'] ], phpMode: true}


},


{id: 'tms_os_version', header: "OS Version", sortable: true, dataIndex: 'os_version'},
{id: 'tms_user_id_ref', header: "Owner", sortable: true, dataIndex: 'user_id_ref',width: 80},

{id:'tms_updated_date', header:"Last Updated", sortable: true, dataIndex: 'updated_date',width: 120},
{id:'tms_isterm_svr', hidden: true, dataIndex: 'isterm_svr',


renderer : function(val, meta, record)
{
if(val == 'Y')
{
meta.tdCls = 'termsvr';
return val;
}

}

},
{
xtype: 'actioncolumn',header: "Edit",
width: 50,
items: [
{
icon : '../extjs/examples/shared/icons/fam/edit.png', // Use a URL in the icon config
tooltip: 'Edit Device',
handler: function(grid, rowIndex, colIndex)
{
var rec = deviceStore.getAt(rowIndex);
checkUserAccessTS("edit","manageAssets",rec);
}
}
]
}


],
selModel: AdminDeviceSelectionModel,
columnLines: true,

stripeRows: true,
loadMask: true,


// inline toolbars
tbar:[
addDeviceBtn,
DeviceCheckboxValuesField,
'-',{
text :'Delete',
id :'deleteButtonDevice',
tooltip :'Delete selected device',
iconCls :'remove',
ref : '../removeButton',
disabled: true,
handler: function () {
checkUserAccessTS("delete","manageTermserver");
//deleteTermsvr(DeviceCheckboxValuesField.getValue());
}
}
,'-',{
text:'Upload',
tooltip:'Bulk Upload of devices',
iconCls:'upload',
handler: function ()
{
//uploadDevice();
checkUserAccessTS("upload","manageTermserver");

}
}, '-', {
text:'Scan',
id :'testButtonDevice',
disabled: true,
tooltip:'Instant Collection',
iconCls:'scan',
handler: function ()
{
scan_devices();
}
},
'-',
DNDControlBtn






,'-',{
text:'Export All',
tooltip:'Export data into Excel',
iconCls:'export',
id:'exportbutton',
handler : function ()
{
var extra_params = get_params_to_export(AdminDevicePanel,deviceStore);
if(DeviceCheckboxValuesField.getValue()!=false)
{
selected_rows = "&selected_ids="+DeviceCheckboxValuesField.getValue();
location.replace('../src/inventory_device.class.php?action=termexport'+extra_params+selected_rows);
}
else
{
location.replace('../src/inventory_device.class.php?action=termexport'+extra_params);
}


// var extra_params = get_params_to_export(AdminDevicePanel,deviceStore);
// //location.replace('../src/profile_group.class.php?action=export_to_excel'+extra_params);
// location.replace('../src/inventory_device.class.php?action=termexport'+extra_params);
}


}
],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: deviceStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display",
plugins : [{ptype: 'pagingtoolbarresizer'}]
}),
stripeRows: true,
autoExpandColumn: 'description'

});

scottmartin
30 May 2012, 7:01 AM
Please remove all of the custom HTML rendering from your code and see if the problem persists.

Scott.

scottmartin
30 May 2012, 7:04 AM
To expand on this, please review the render parameters to decorator your data:



function red_data(val, meta, record) {
if (record.data.color === 'red') {
meta.tdCls += ' ' + 'my-red-css';
}
return val;
}


Regards,
Scott.

renganathan
24 Jul 2012, 10:39 PM
Please remove all of the custom HTML rendering from your code and see if the problem persists.

Scott.


Hi Scott,

Is there any way to fix this issues without removing the rendering ?

Here in our project we need hyperlinks , thats why we do rendering.

Any suggestions or comments welcome?

renganathan
31 Jul 2012, 3:44 AM
Hi Scott,

I have removed the renders from the grid .Still the problem exists







Please remove all of the custom HTML rendering from your code and see if the problem persists.

Scott.