GXT don't play nicely with other script frameworks?

[r4nd7263]

We are using GXT to leverage some of our CMS functions. We are near end of our development cycle and really to purchase GXT support when we realized there are style declaration in gxt-all.css like "h1, h2, h3, h4, h5, h6 {...}" that causes styling issues for our CMS users. It isn't a huge problem; we could probably create our own theme to get around.

However this leads us to wonder if GXT isn't the best module to incorporate into our CMS. We get the feeling that GXT is designed to be the dominate framework as opposed to like other scripting frameworks that we can mix and match. Especially the demos seem to gear toward GXT full screen approach. While we haven't had major issues adding small GXT components to our more JSP oriented pages, we are worried if future GXT release decided to be more aggressive in controlling DOM elements and styles, we will require a major redesign.

What are GXT developers' thought on this? Are our concerns misplaced? Also we would appreciate getting some advices on creating a stylesheet that ensures isolation of GXT style - applying GXT styles only to GXT components. Thanks.

[sven]

You can simple scope the reset stuff to gxt components only. Simple change the css rule to your needs.

[r4nd7263]

We added "ps-gxt" to the RootPanel, and added ".ps-gxt" to all reset stuff, for example: .ps-gxt div

The problem is, by doing so the order for which the styles are applied is changed. For example, for a grid header element:

<div id="x-auto-11" class=" x-grid3-hd-inner x-grid3-hd-title  x-component" style="width: 392px; height: 14px;">...</div>

Using firebug, the two screenshots show the difference. Notice the padding in the second picture (our stylesheet) overwrites .x-grid3-hd-inner, causing the header to appear incorrectly shorter.

css_apply_order_1.png

----------------------------

css_apply_order_2.png


The fix is to apply .ps-gxt to .x-grid3-hd-inner. Probably need to apply to entire gxt-all.css, which is a nightmare when upgrading GXT.

Is there a better way?

[iyeh]

Is there a solution yet?

Should this be a feature request? The reset stuff should be contextual. I have seen it done in YUI library. GXT's CSS reset stuff makes hard to develop CMS application. So far I've been dodging GXT for pages that render HTML generated from TinyMCE or other WYSIWYG editors.

[sven]

We plan to rewrite all the css for GXT3. I will add this to the list.