PDA

View Full Version : gxt-all conflicts with ext-all



extjsue
6 Jul 2010, 8:02 AM
I have app that integrates gwt and ext. It uses gxt-all.css and ext-all.css. When I click on my menu in a toolbar, the menu is displayed off the page. I've narrowed it down to a rule in gxt-all for .x-hidden, .x-hide-offsets which is marked !important. If I change this rule to remove the !important from left and top, the menu is displayed properly. What am I doing wrong? Below is sample code that illustrates the problem. If you comment out the gxt-all.css line, the menu is shown properly.



<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" >

<link rel="stylesheet" type="text/css" href="/ViewerCommon/gxt/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"/>

<script type="text/javascript" src="/ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
</head>

<body>
<div id="docbody"></div>
<script type="text/javascript">

var menu;
var tb;
var createMenu = function(toarea)
{
menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item'
},
new Ext.menu.CheckItem({
text: 'Another check item'
})
]
});

tb = new Ext.Toolbar({
items: [{
text:'Our first Menu',
menu: menu}],
renderTo: toarea
});
}

createMenu('docbody');
var panel = new Ext.FormPanel(
{
renderTo:'docbody',
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 200,
defaultType : 'textfield',
items: [tb]
});

</script>
</body>

</html>

jay@moduscreate.com
10 Jul 2010, 9:31 AM
they are not designed to work together.