PDA

View Full Version : No GridPanel title displaing IE7 only issue



bwright
15 Apr 2009, 12:24 PM
I am having some issues with IE not displaing the title of my GridPanel.

I have created the Discussion "TAB" for a larger project it startes by loading a FormPanel with a div in the body next we load up a data store and use that to fill the GridPanel. now as you can see the GridPanel gets it's data and displays said data however ... where did my styles go and there was a title there a second ago?

let me know what data you would need from me to help debug this.

extjs 2.0
bug only found in ie7 (not tested for lower ie or 8)
run through jslint no big errors

var bbGridPanel = new Ext.grid.GridPanel({
id:'bbGridPanel'
,store:'bbStore'
,listeners: {'rowclick':handleBBRowClick}
,columns:[
[redacted]
]
,view: new Ext.grid.GroupingView({
forceFit:true
,startCollapsed:true
,showGroupName:false
,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})

,frame:true
,hideHeaders:true
,autoWidth:true
,autoHeight:true
,collapsible: true
,animCollapse: false
,hideCollapseTool:true
,title:'All Discussions'
,iconCls: 'icon-grid'
,renderTo: 'bbGrid_div'
});
}

16 Apr 2009, 5:40 AM
welcome to the forum. Can you post the entire tab code encapsulated in CODE tags please?

bwright
16 Apr 2009, 6:17 AM
Some name have been redacted as needed hope this helps. handleDiscussionTab is the 'south' area and the area of import. west is a tree that loads images into north(east is eaten by north and south).

on page load there is only west and north, on click of a west tree node we pop file x into north and a set of collapsed tabs in south (hense the listeners at EOF).



editFileContainer_items.push(new Ext.Panel({
collapsible: true,
collapsed:false,
id:'fileProperties'+winid,
header:false,
height: (Ext.isIE ? 60 : 25),
autoScroll:false
,items:[

new Ext.ux.InlineToolbarTabPanel2({
toolbar: {items:[
new Ext.BoxComponent({
autoEl: {tag: 'div', cls: 'x-tool x-tool-up', id:'filePropertiesToggle'+winid},

listeners: {render:function(f){
f.el.on('click', function(button, e) {
var minimize = (button.target.className == 'x-tool x-tool-down-over');

toggle_properties_panel(minimize,winid);
})
,f.el.on('mouseover',function(button,e){
this.dom.className = (button.target.className.substr(0,18) == 'x-tool x-tool-down' ? 'x-tool x-tool-down-over' : 'x-tool x-tool-up-over');})
,f.el.on('mouseout',function(button,e){
this.dom.className = (button.target.className.substr(0,18) == 'x-tool x-tool-down' ? 'x-tool x-tool-down' : 'x-tool x-tool-up');})
}
}
})
,'   '
]},
id:'file_properties_tabpanel'+winid,
border:false,
height:195,
layoutOnTabChange:true,
winid:winid,
collapsible:true,
collapsed: true,
items:[{ id:'fileProperties_form'+winid
,title:'Properties'
,items:[prop_form]
,listeners: {activate: function(tabpanel){
tabpanel.setHeight(200);
if(tabpanel.ownerCt.collapsed){
toggle_properties_panel(false,winid);
}
}
}
}
,{ id:'fileProperties_redacted'+winid
,title:redacted'
,listeners: {activate: redacted'}
,autoScroll:false}
,{ id:'fileProperties_redacted'+winid
,title:'redacted'
,listeners: {activate: redacted}
,autoScroll:false}
,{ id:'fileProperties_discu'+winid
,title:'Discussion'
,listeners: {activate: handleDiscussionTab}
,autoScroll:false}

]

})]
})
);

16 Apr 2009, 6:19 AM
welcome to the forum. Can you post the entire tab code encapsulated in CODE tags please?

See above

bwright
16 Apr 2009, 7:09 AM
Explain what you have already done:
removed title from GridPanel, made title blank, make title a coment, turned header off, removed background:transparent url.


intended final behavior
Title will not show in ie7. Was given the ok to removed title if the layout would look nice, however even w/o a title the div are creating empty blocks mis-formatting my page in ie7 and below.




var bbGridPanel = new Ext.grid.GridPanel({
id:'bbGridPanel'
,store:'bbStore'
,listeners: {'rowclick':handleBBRowClick}
,columns:[
[redacted]
]
,view: new Ext.grid.GroupingView({
forceFit:true
,startCollapsed:true
,showGroupName:false
,groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})

,frame:true
,hideHeaders:true
,autoWidth:true
,autoHeight:true
,collapsible: true
,animCollapse: false
,hideCollapseTool:true

,header:true
,title:'All Discussions'

,iconCls: 'icon-grid'
,renderTo: 'bbGrid_div'
});
}

x-panel-tl *-tr *-tc all have a background:transparent url(X) which displays the img and title in every browser save ie7 and below.

using ie 8 in combatibility mode and the developer tools i inspect the area and see that the data is there just not displaing.
<DIV class="x-panel-tl">
<DIV class="x-panel-tr">
<DIVclass="x-panel-tc">
<DIVstyle="MozUserSelect: none; KhtmlUserSelect: none" id="ext-gen363" class="x-panel-header x-unselectable x-panel-icon icon-grid" unselectable="on">



<SPANid="ext-gen405" class="x-panel-header-text">All Discussions</SPAN>

</DIV>
</DIV>
</DIV>
</DIV>


Thanks for your help