PDA

View Full Version : IE6 and IE7 ExtJS gridPanel Header disappear



fafche
20 Jan 2011, 3:40 AM
Hi, I am using ExtJS v 3.3. this is my grid:


var grid=new Ext.grid.GridPanel({title:'',store: store,
trackMouseOver:true,
disableSelection:true,
loadMask:true,
columns:[{id:'srf2', header:'<b>?? ?????</b>', dataIndex:'fileName', width:'auto', sortable:true},{id:'cbDocType', header:'<b>??? ????</b>', dataIndex:'cbDocType', width:'auto', sortable:true},{id:'cbDocSubject', header:'<b>???? ????</b>', dataIndex:'cbDocSubject', width:'auto', sortable:true},{id:'txtFromDocDate', header:'<b>????? ????</b>', dataIndex:'txtDocDate', width:'auto', sortable:true},{id:'txtDocName', header:'<b>?? ????</b>', dataIndex:'txtDocName', width:'auto', sortable:true},{id:'cbInitiativeDepartment', header:'<b>????? ?????</b>', dataIndex:'cbInitiativeDepartment', width:'auto', sortable:true},{id:'cbDepartmentInitiates', header:'<b>??? ????</b>', dataIndex:'cbDepartmentInitiates', width:'auto', sortable:true},{id:'cbBuyerDepartment', header:'<b>??&quot;? ???</b>', dataIndex:'cbBuyerDepartment', width:'auto', sortable:true},{id:'cbEconomist', header:'<b>?????</b>', dataIndex:'cbEconomist', width:'auto', sortable:true},{id:'txtDemandNumber', header:'<b>???? ?????</b>', dataIndex:'txtDemandNumber', width:'auto', sortable:true},{id:'txtCallNumber', header:'<b>???? ???????</b>', dataIndex:'txtCallNumber', width:'auto', sortable:true},{id:'txtSupplier', header:'<b>???</b>', dataIndex:'txtSupplier', width:'auto', sortable:true},{id:'txtFromDocUploadDate', header:'<b>????? ?????</b>', dataIndex:'uploadDate', width:'auto', sortable:true},{id:'userName', header:'<b>?? ?????</b>', dataIndex:'userName', width:'auto', sortable:true}],
stripeRows:true,
viewConfig:{forceFit:true,
enableRowBody:true,
showPreview:true
}
,
sm:new Ext.grid.RowSelectionModel({singleSelect:true})

,bbar:[new Ext.PagingToolbar({id:'paging-bar'
,pageSize:30
,store:store
,displayInfo:true
,displayMsg:localize.displayPages
,emptyMsg:localize.noDocsToDisplay
,listeners:{beforechange:onBeforePageChange}
})],listeners:{rowcontextmenu:onRowcontextmenu},contextMenu:new Ext.menu.Menu({items:[{pressed:false,
enableToggle:false,
text:localize.deleteRecord,id:'delete_attachment'}
,{pressed:false,
enableToggle:false,
text:localize.downloadRecord,id:'download_attachment'}
,{pressed:false,
enableToggle:false,
text:localize.updateRecord,id:'update_attachment'}
],listeners:{itemclick:onItemclick}}),autoExpandColumn:'userName',id:'searchResultPanel'});


Ext.onReady(function(){
var dynamic_grid = new Ext.Container({
layout:'fit',
items:grid
})
dynamic_grid.render('dynamic_grid');
Ext.getBody().on('contextmenu', Ext.emptyFn, null, {preventDefault: true});
//onSubmit(false);
});

once I refresh the grid either with the PagingToolBar or Update the store records IE6 and IE7 make the grid headers disappear. Any suggestion on why this happens?

ssamayoa
20 Jan 2011, 5:37 AM
Picture shows a ribbon like interface, isnt?

Do you did by "hand" (using out of the box components), craft your own or what you used?

Regards.

20 Jan 2011, 7:36 AM
Is there a reason why you posted this in a "Community Discussion" forum? Moving to Ext JS help.

stephen.friedrich
6 Jun 2011, 6:24 AM
I know this thread is old, but maybe it can help if somebody else finds this thread in the future.

I had this problem when accessing the application via HTTPS and not having BLANK_IMAGE_URL configured. In that case there's a warning that "this page contains both secure and insecure elements". Interestingly no matter if I selected "Yes" or "No" (load or ignore insecure elements) the column headers where gone after refresh.
Correctly setting BLANK_IMAGE_URL fixed the problem.