PDA

View Full Version : [INFO REQ][3.??] Submenus in IE 7 don't show up when using frames



tvanzoelen
15 Jun 2009, 5:34 AM
Hi,

I am testing Extjs 3.0. Some of my code doesn't work anymore. Using Extjs 2.2 there is no problem. With 3.0 a menu problem shows up if I launch my application in a frame. The problem is that the menu.Items do not show up if you push the Menu in the panel toolbar.
with Chrome, IE 8.0 and Firefox there is no problem. Anyone encountered something simular?

Below a piece of the my code. (don't ask for all the code because most of my apps are automatically generated and have at leat 4000+ lines of code and besides I am confident that my code is always good B)))


var menuitem_2 = new Ext.menu.Item({id:'menuitem_2',text:'text1',icon:'LIB/images/edit.png'});
var menuitem_3 = new Ext.menu.Item({id:'menuitem_3',text:'text2',icon:'LIB/images/text.png'});
var menu4 = new Ext.menu.Menu({id:'menu4'});

menu4.add(menuitem_2);
menu4.add(menuitem_3);

var menuitem_7 = new Ext.menu.Item({id:'menuitem_7',text:'text3',icon:'LIB/images/users.png'});
var menuitem_8 = new Ext.menu.Item({id:'menuitem_8',text:'text4',icon:'LIB/images/users.png'});
var menu9 = new Ext.menu.Menu({id:'menu9'});
menu9.add(menuitem_7);
menu9.add(menuitem_8);

var menuitem_12 = new Ext.menu.Item({id:'menuitem_12',text:'text5',icon:'LIB/images/handshake.png'});
var menuitem_13 = new Ext.menu.Item({id:'menuitem_13',text:'text6',icon:'LIB/images/users.png'});
var menuitem_14 = new Ext.menu.Item({id:'menuitem_14',text:'text7',icon:'LIB/images/graduation_hat.png'});
var menuitem_15 = new Ext.menu.Item({id:'menuitem_15',text:'text9',icon:'LIB/images/calendar.png'});
var menuitem_16 = new Ext.menu.Item({id:'menuitem_16',text:'text10',icon:'LIB/images/apps/contract.png'});
var menu17 = new Ext.menu.Menu({id:'menu17'});
menu17.add(menuitem_12);
menu17.add(menuitem_13);
menu17.add(menuitem_14);
menu17.add(menuitem_15);
menu17.add(menuitem_16);

var menuitem_23 = new Ext.menu.Item({id:'menuitem_23',text:'text11',icon:'LIB/images/network/safe_view.png'});
var menu24 = new Ext.menu.Menu({id:'menu24'});
menu24.add(menuitem_23);

var panel1 = new Ext.Panel({id:'panel1',layout:'fit', tbar: [{text:'Menu4' , menu: menu4},{text:'Menu9' , menu: menu9},{text:'Menu17' , menu: menu17},{text:'menu24' , menu: menu24}], bbar: statusbar});




<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS='100%' FRAMEBORDER='0' BORDER='0' FRAMESPACING='0'>
<FRAME NAME='RTKGKGALDLD' SRC='Default.aspx?application=2&client=3'>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>


Or should I kick our System Administrator? Because I cannot find the solution even here on the forum.

Thank you Terence

evant
15 Jun 2009, 5:36 AM
Unless we can produce some kind of test case that we can run locally it's going to be difficult to attempt to address this. Can you set up a simplified test case?

tvanzoelen
15 Jun 2009, 5:42 AM
Yes I make one!

tvanzoelen
15 Jun 2009, 7:12 AM
Try to run this in your IE 7.0 explorer


<script type="text/javascript">

var debug;
var debug2 = new Object();
var debug3;

Ext.namespace('TestCase');
//Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

TestCase.app = function()
{
// var statusbar = new Ext.StatusBar({id:'statusbar',defaultText:'Terence van Zoelen'});

var menuitem_2 = new Ext.menu.Item({id:'menuitem_2',text:'text1',icon:'images/edit.png'});
var menuitem_3 = new Ext.menu.Item({id:'menuitem_3',text:'text2',icon:'images/text.png'});
var menu4 = new Ext.menu.Menu({id:'menu4'});

menu4.add(menuitem_2);
menu4.add(menuitem_3);

var menuitem_7 = new Ext.menu.Item({id:'menuitem_7',text:'text3',icon:'images/users.png'});
var menuitem_8 = new Ext.menu.Item({id:'menuitem_8',text:'text4',icon:'images/users2.png'});
var menu9 = new Ext.menu.Menu({id:'menu9'});
menu9.add(menuitem_7);
menu9.add(menuitem_8);

var menuitem_12 = new Ext.menu.Item({id:'menuitem_12',text:'text5',icon:'images/handshake.png'});
var menuitem_13 = new Ext.menu.Item({id:'menuitem_13',text:'text6',icon:'images/users.png'});
var menuitem_14 = new Ext.menu.Item({id:'menuitem_14',text:'text7',icon:'images/graduation_hat.png'});
var menuitem_15 = new Ext.menu.Item({id:'menuitem_15',text:'text9',icon:'images/calendar.png'});
var menuitem_16 = new Ext.menu.Item({id:'menuitem_16',text:'text10',icon:'images/contract.png'});
var menu17 = new Ext.menu.Menu({id:'menu17'});
menu17.add(menuitem_12);
menu17.add(menuitem_13);
menu17.add(menuitem_14);
menu17.add(menuitem_15);
menu17.add(menuitem_16);

var menuitem_23 = new Ext.menu.Item({id:'menuitem_23',text:'text11',icon:'images/safe_view.png'});
var menu24 = new Ext.menu.Menu({id:'menu24'});
menu24.add(menuitem_23);

var panel1 = new Ext.Panel({id:'panel1',layout:'fit', tbar: [{text:'Menu4' , menu: menu4},{text:'Menu9' , menu: menu9},{text:'Menu17' , menu: menu17},{text:'menu24' , menu: menu24}]});
panel1.doLayout();

return{
init: function(){
Ext.QuickTips.init();
var viewport = new Ext.Viewport({title: 'Test Case',layout: 'fit', items:[panel1]});
}
}; //end return
}();//end app

Ext.onReady(TestCase.app.init, TestCase.app);

</script>

Use a framset to test it in. Like the one in the previous post. I also have the testcode in a C# .net solution if you want, but the upload to this forum didn't work.



Hope someone can help me out

mystix
15 Jun 2009, 8:23 AM
@tvanzoelen: in future, please post code in
tags, and html in
tags.

evant
15 Jun 2009, 9:16 PM
Works fine for me in IE7, looks like you have a bug in your app somewhere. Why do people still use framesets as opposed to Iframes?

tvanzoelen
15 Jun 2009, 10:06 PM
I used the code I have posted, can you tell me then where is the bug?
I don't use framesets but the server that hosts the url is redirecting with a frameset,
like this one




<HTML>
<HEAD>

</HEAD>
<FRAMESET ROWS='100%' FRAMEBORDER='0' BORDER='0' FRAMESPACING='0'>
<FRAME NAME='RTKGKGALDLD' SRC='Default.aspx'>
<NOFRAMES>
<BODY>


</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

evant
15 Jun 2009, 10:18 PM
No idea, moving this to help.

tvanzoelen
15 Jun 2009, 10:56 PM
After some heavy clicking and mouseovers I get this error
Foutdetails webpagina

Message: 'Ext.fly(...)' is empty or not an object
Line: 8
Character/Col: 27956 //I translated this
Code: 0
URI: http://localhost/TestCase/ext3/ext-all.js

I would have had my ext-all-debug.js in the reference, now I cannot reproduce the error :(

But ... when I click the menu multiple times and do a lot of mouseovers , I finally got the menuus back. I will try to upload the testcase to some webserver maybe other people can try. There must be a problem, for example, the page that is giving my menuus back is still not working on the computer of my neighbour.. wait ..mouseover..clicking.. yes there they are.. reloading the page on that computer...gone again..mouseovers .. clicking .. yes .. back again. :-/

Something is not working all smooth here

tvanzoelen
15 Jun 2009, 11:07 PM
Ah they moves me to help I am sure this is a bug :(

with debug mode on

Foutdetails webpagina

Bericht: 'Ext.fly(...)' is leeg of geen object
Regel: 2094
Teken: 13
Code: 0
URI: http://localhost/TestCase/ext3/ext-all-debug.js

If this issue is not solved it is impossible to upgrade to extj 3.0.

tvanzoelen
16 Jun 2009, 5:21 AM
some links you can see the the bug

try this one with IE 7.0

http://aslas.artsystems.nl/3.0test/il/frametest.htm

and this one without

http://aslas.artsystems.nl/3.0test/il (http://aslas.artsystems.nl/3.0test/il/)

hendricd
16 Jun 2009, 6:03 AM
@tvanzoelen -- I just tried it on IE8 (The parent menu Item does not fire in quirks (compatibility) mode, but does in standards mode).

To narrow things down a bit, what happens if you use the handler config option of the menu items rather than a 'click' event?

See the Toolbar Menus sample source (http://extjs.com/deploy/ext-3.0-rc2/examples/menu/menus.js)for some examples.

tvanzoelen
16 Jun 2009, 6:27 AM
Thank you I will try. Compatibility mode is just IE 7.0 and there is the bug.

here some new links because the others where behind port 85

within a frame

http://www.transpasonline.nl/3.0test/il/frametest.htm

and without

http://www.transpasonline.nl/3.0test/il/

tvanzoelen
16 Jun 2009, 9:51 AM
Problem is most likely the DocType missing in the frameset, see http://www.extjs.com/forum/showthread.php?t=71476&page=2

chesstrix
12 Jul 2009, 11:24 PM
I have the same issue (wasn't sure if I should bump or create a new thread)

I am using IE7 and menu items appear as shown in the attachment if I use DOCTYPE loose or strict. They appear OK if I remove the doctype altogether.

Code fragment


iq.App.mmoPanel = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
id: this.bundle + "Panel",
frame:true,
titleCollapse: true,
collapsed: false,
layout: "border",
defaults: {
bodyStyle: "background-color: #FFFFFF; padding: 5px; border: 1px solid #99BBE8;"
},
items: [{
region: "center",
id: this.bundle + "Cards",
layout: "card",
activeItem: 0,
tbar: [{
text: "View",
menu: {
items: [{
text: "Thumbnails"
}, {
text: "Details"
}]
}
}, "->", {
text: "Attach",
iconCls: "paperclip"
}],
items: [{
items: [
new Ext.DataView({
store: this.store,
tpl: this.tpl,
autoHeight: true,
singleSelect: true,
itemSelector:"div.thumb-wrap",
emptyText: "No images to display."
})
]
}, {
html: "List Details Panel",
autoHeight: true
}, {
html: "Upload Panel",
autoHeight: true
}]
}, {
region: "east",
split: true,
html: "east panel",
bodyStyle: "background-color: #FFFFFF; padding: 5px; border: 1px solid #99BBE8;",
width: this.eastPanelWidth
}]
});
iq.App.mmoPanel.superclass.initComponent.call(this);
this.store.load();
}
});


Grateful for any help.