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

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.

<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>

<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

var panel = new Ext.FormPanel(
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 200,
defaultType : 'textfield',
items: [tb]



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