PDA

View Full Version : [INFOREQ][3.??] GridPanel ColumnHeaders/Rows Misaligned when scrolled right - IE7



sethladd
10 Dec 2009, 2:06 PM
Hello,

I have a GridPanel that, with enableRowBody : true, when scrolled to the right all the way, in IE7, will misalign its rows and the column headers. This works fine in FF 3.5

Here's the code:



var grid = new Ext.grid.GridPanel({
store: store,
stripeRows: true,
height: 580,
width: 970,
title: 'TRAC2ES Movements',
stateful: true,
stateId: 'trac2es-movements-grid',
loadMask: true,
plugins: [filters],
columns: [{"hidden": false, "dataIndex": "id", "sortable": true, "width": 100, "header": "Id"}, {"hidden": true, "dataIndex": "origin_facility_code", "sortable": true, "width": 100, "header": "Origin Facility Code"}, {"hidden": false, "dataIndex": "unit_name", "sortable": true, "width": 100, "header": "Unit Name"}, {"hidden": true, "dataIndex": "origin_theater", "sortable": true, "width": 100, "header": "Origin Theater"}, {"hidden": true, "dataIndex": "origin_facility_name", "sortable": true, "width": 100, "header": "Origin Facility Name"}, {"hidden": false, "dataIndex": "destination_theater", "sortable": true, "width": 100, "header": "Destination Theater"}, {"hidden": true, "dataIndex": "destination_facility_code", "sortable": true, "width": 100, "header": "Destination Facility Code"}, {"hidden": true, "dataIndex": "destination_facility_name", "sortable": true, "width": 100, "header": "Destination Facility Name"}, {"hidden": false, "dataIndex": "precedence", "sortable": true, "width": 100, "header": "Precedence"}, {"hidden": false, "dataIndex": "casualty_event", "sortable": true, "width": 100, "header": "Casualty Event"}, {"hidden": false, "dataIndex": "injury_type", "sortable": true, "width": 100, "header": "Injury Type"}, {"hidden": true, "dataIndex": "movement_classification_code", "sortable": true, "width": 100, "header": "Movement Classification Code"}, {"hidden": true, "dataIndex": "transport_mode", "sortable": true, "width": 100, "header": "Transport Mode"}, {"hidden": false, "dataIndex": "disposition_event", "sortable": true, "width": 100, "header": "Disposition Event"}, {"hidden": false, "dataIndex": "primary_diagnosis_code", "sortable": true, "width": 100, "header": "Primary Diagnosis Code"}, {"hidden": false, "dataIndex": "primary_diagnosis_name", "sortable": true, "width": 100, "header": "Primary Diagnosis Name"}, {"hidden": false, "dataIndex": "primary_medspec_code", "sortable": true, "width": 100, "header": "Primary Medspec Code"}, {"hidden": false, "dataIndex": "primary_medspec_name", "sortable": true, "width": 100, "header": "Primary Medspec Name"}, {"hidden": false, "dataIndex": "secondary_diagnosis_code", "sortable": true, "width": 100, "header": "Secondary Diagnosis Code"}, {"hidden": false, "dataIndex": "secondary_diagnosis_name", "sortable": true, "width": 100, "header": "Secondary Diagnosis Name"}, {"hidden": true, "dataIndex": "secondary_medspec_code", "sortable": true, "width": 100, "header": "Secondary Medspec Code"}, {"hidden": true, "dataIndex": "secondary_medspec_name", "sortable": true, "width": 100, "header": "Secondary Medspec Name"}, {"hidden": true, "dataIndex": "other_diagnosis_code", "sortable": true, "width": 100, "header": "Other Diagnosis Code"}, {"hidden": true, "dataIndex": "other_diagnosis_name", "sortable": true, "width": 100, "header": "Other Diagnosis Name"}, {"hidden": true, "dataIndex": "other_medspec_code", "sortable": true, "width": 100, "header": "Other Medspec Code"}, {"hidden": true, "dataIndex": "other_medspec_name", "sortable": true, "width": 100, "header": "Other Medspec Name"}, {"hidden": true, "dataIndex": "ssn", "sortable": true, "width": 100, "header": "Ssn"}, {"hidden": true, "dataIndex": "movement_classification_name", "sortable": true, "width": 100, "header": "Movement Classification Name"}, {"hidden": true, "dataIndex": "reason_regulated", "sortable": true, "width": 100, "header": "Reason Regulated"}, {"hidden": true, "dataIndex": "commercial_transport", "sortable": true, "width": 100, "header": "Commercial Transport"}, {"hidden": true, "dataIndex": "number_litter_spaces", "sortable": true, "width": 100, "header": "Number Litter Spaces"}, {"hidden": true, "dataIndex": "number_ambulatory_spaces", "sortable": true, "width": 100, "header": "Number Ambulatory Spaces"}, {"hidden": true, "dataIndex": "ccatt", "sortable": true, "width": 100, "header": "Ccatt"}, {"hidden": false, "dataIndex": "admitted_mtf", "sortable": true, "width": 100, "header": "Admitted Mtf"}, {"hidden": true, "dataIndex": "last_known_itv_event", "sortable": true, "width": 100, "header": "Last Known Itv Event"}, {"hidden": false, "dataIndex": "last_known_location", "sortable": true, "width": 100, "header": "Last Known Location"}, {"hidden": true, "dataIndex": "number_all_attendants", "sortable": true, "width": 100, "header": "Number All Attendants"}, {"hidden": true, "dataIndex": "number_ma", "sortable": true, "width": 100, "header": "Number Ma"}, {"hidden": true, "dataIndex": "number_nma", "sortable": true, "width": 100, "header": "Number Nma"}, {"hidden": true, "dataIndex": "pmr_has_itinerary", "sortable": true, "width": 100, "header": "Pmr Has Itinerary"}, {"hidden": true, "dataIndex": "mission_id_of_last_mission", "sortable": true, "width": 100, "header": "Mission Id Of Last Mission"}, {"hidden": true, "dataIndex": "aircraft_type", "sortable": true, "width": 100, "header": "Aircraft Type"}, {"hidden": true, "dataIndex": "number_missions_pmr_movements", "sortable": true, "width": 100, "header": "Number Missions Pmr Movements"}, {"hidden": true, "dataIndex": "number_ron_stops", "sortable": true, "width": 100, "header": "Number Ron Stops"}, {"hidden": true, "dataIndex": "cardiac_monitor", "sortable": true, "width": 100, "header": "Cardiac Monitor"}, {"hidden": true, "dataIndex": "incubator", "sortable": true, "width": 100, "header": "Incubator"}, {"hidden": true, "dataIndex": "stryker_frame", "sortable": true, "width": 100, "header": "Stryker Frame"}, {"hidden": true, "dataIndex": "traction", "sortable": true, "width": 100, "header": "Traction"}, {"hidden": true, "dataIndex": "infusion_pump", "sortable": true, "width": 100, "header": "Infusion Pump"}, {"hidden": true, "dataIndex": "ventilator", "sortable": true, "width": 100, "header": "Ventilator"}, {"hidden": true, "dataIndex": "battery_support_unit", "sortable": true, "width": 100, "header": "Battery Support Unit"}, {"hidden": true, "dataIndex": "pulse_oximeter", "sortable": true, "width": 100, "header": "Pulse Oximeter"}, {"hidden": true, "dataIndex": "vital_signs_monitor", "sortable": true, "width": 100, "header": "Vital Signs Monitor"}, {"hidden": true, "dataIndex": "suction_apparatus", "sortable": true, "width": 100, "header": "Suction Apparatus"}, {"hidden": true, "dataIndex": "oxygen_analyzer", "sortable": true, "width": 100, "header": "Oxygen Analyzer"}, {"hidden": true, "dataIndex": "litter_folding", "sortable": true, "width": 100, "header": "Litter Folding"}, {"hidden": true, "dataIndex": "mattress_litter", "sortable": true, "width": 100, "header": "Mattress Litter"}, {"hidden": true, "dataIndex": "straps_webbing", "sortable": true, "width": 100, "header": "Straps Webbing"}, {"hidden": true, "dataIndex": "restraint_set", "sortable": true, "width": 100, "header": "Restraint Set"}, {"hidden": true, "dataIndex": "blanket", "sortable": true, "width": 100, "header": "Blanket"}, {"hidden": true, "dataIndex": "back_board", "sortable": true, "width": 100, "header": "Back Board"}, {"hidden": false, "dataIndex": "ready_date", "sortable": true, "width": 100, "header": "Ready Date"}, {"hidden": false, "dataIndex": "dses_person_identifier", "sortable": true, "width": 100, "header": "Dses Person Identifier"}, {"hidden": false, "dataIndex": "personnel_status", "sortable": true, "width": 100, "header": "Personnel Status"}, {"hidden": false, "dataIndex": "current_pmr_state", "sortable": true, "width": 100, "header": "Current Pmr State"}, {"hidden": true, "dataIndex": "age", "sortable": true, "width": 100, "header": "Age"}, {"hidden": true, "dataIndex": "age_unit", "sortable": true, "width": 100, "header": "Age Unit"}, {"hidden": true, "dataIndex": "gender", "sortable": true, "width": 100, "header": "Gender"}, {"hidden": false, "dataIndex": "service_grade_code", "sortable": true, "width": 100, "header": "Service Grade Code"}, {"hidden": true, "dataIndex": "dispostion_comments", "sortable": false, "width": 100, "header": "Dispostion Comments"}],
viewConfig: {
forceFit: false,
autoFill: false,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p><span style="color:gray">History:</span> '+((record.data.history === null) ? '(empty)' : Ext.util.Format.htmlEncode(record.data.history))+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
tbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true,
displayMsg: 'Displaying movements {0} - {1} of {2}',
emptyMsg: "No movements to display",
plugins: [filters],
items:[
'-',
{
pressed: true,
enableToggle:true,
text: 'Show History',
cls: 'x-btn-text-icon grid-row-details-button',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
},
'-',
{
text: 'Display Current Filters',
tooltip: 'Displays All Currently Active Filters for this Grid',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('Current Filters',data);
}
},
'-',
{
text: 'Clear Filters',
handler: function () {
grid.filters.clearFilters();
}
}
]
})
});



If I remove enableRowBody, then it works fine. Also, I wasn't sure if I needed forceFit : false or autoFill : fallse (this was just testing)

Thanks,
Seth

evant
13 Dec 2009, 7:40 PM
You haven't really provided enough information:

1) What version of Ext are you using?
2) You've omitted a bunch of stuff that stops the example from running (the store definition, sample data etc)

Please provide the extra info so we can look into it.