PDA

View Full Version : Using ExtGWT and ExtJS together



dsartory
20 Jan 2012, 12:29 PM
Hi everyone -
I appreciate any advice on this topic and apologize in advance for my lack of clear understanding... I have an app built in Vaadin (GWT) and am debating switching to Ext. Can I use ExtGWT when I convert my existing app, then use ExtJS for all other development and take advantage of the relationship by leveraging any commonality? Or does using ExtGWT and ExtJS leave me in the same boat as using Vaadin and ExtJS eg: no real connection at all?

Hope that made sense...

Thank you so much!
Dave

Ekambos
22 Jan 2012, 1:23 PM
I dont understand. You want to use ExtJS and GXT in the same app ? If yes ? Why s that ? Why mix them ?

dsartory
23 Jan 2012, 11:20 AM
Hey Ekambos-
The requirements are internal. We are not mixing by choice... we're trying to salvage substantial work that was done in another GWT based framework and were hoping that by using ExtJS and ExtGWT we could leverage the similarities better. The short version is, can ExtJS and ExtGWT interact in any way BETTER than ExtJS and any other GWT based framework?

Colin Alworth
23 Jan 2012, 3:19 PM
In short, no, because while Ext GWT code is compiled to Javascript, that code will bear little resemblence to hand written Javascript like Ext JS.

If you have existing GWT code, you may find it easier to combine that with Ext GWT, as both are written with Java, using GWT. If you try to mix Ext JS and regular GWT (or Ext GWT) you will probably find lots of places you need to write JSNI methods to correctly talk back and forth.

The similarities are mostly in style, but good coding practice and event wiring for hand written JS tend to be different than for GWT code.

sven
24 Jan 2012, 1:22 AM
The short version is, can ExtJS and ExtGWT interact in any way BETTER than ExtJS and any other GWT based framework?
You cannot use them on the same page currently. Only ExtJS4 in the sandbox version will work. The problem is the CSS. Although the stylenames are the same, some styling is different and would end in bad behaviours. You would need to fix this first or use the ExtJS4 sandbox version.

Ekambos
24 Jan 2012, 1:29 AM
@Colin
Well it is actually possible to mix ExtJS and GWT(GXT). And that in a way that s really transparent to the user. We did this by wrapping ExtJS with GWT. We started this for small projects and we now almost have the entire ExtJS 3 and 4 API exported to GWT. We might open source it sometime in the future. We were not just sure if this is a common practice. It looks like yeah :) Here is a demo :
http://gwt4extjs4.appspot.com/ . Check the combination example to see a GWT widget inside a ExtJS Panel.

dsartory
31 Jan 2012, 5:57 PM
Hi Colin- How intensive a project would "fixing" the CSS be? Is this a reasonable task or a massive effort? I appreciate the advice!

Dave

Colin Alworth
12 Feb 2012, 5:10 PM
As Sven mentioned, if using Ext JS 4's 'sandbox' css feature, it shouldn't be an issue at all.

walkerr
26 Sep 2013, 11:42 PM
This is an old thread I know, but we have a variation on this - a need to mix GWT-Ext (which uses the old ExtJS 2 CSS) and the latest GXT 3.

Does GXT have a sandbox that would help with this, or will we be into mass CSS hacking?

Feel free to point me at any other threads which discuss this.

walkerr
26 Sep 2013, 11:54 PM
I think I may have answered my own question on this.

This link describes how to use Ext GWT 2 and 3 side by side:

http://developer.sencha.com/news/running-ext-gwt-2-and-3-together

I'm thinking if that can work, then quite possibly I may not have an issue with an old GWT-Ext version based on ExtJS 2

walkerr
27 Sep 2013, 4:14 AM
Ok - guess it wasn't quite that simple then.

New Window/Panel renders - but using IE Dev panel (F12) I can see it's picking up styles from the old ext-all.css. Guess will need to dig further - tips appreciated.

Colin Alworth
27 Sep 2013, 11:28 AM
Worth pointing out that GXT (formerly Ext GWT) != GWT-Ext, which is a completely different product by a different organization (and as far as I know, is no longer maintained). That said, just as GXT 3 should play nice with Ext JS, it should also play nice with GWT-Ext.

walkerr
29 Sep 2013, 9:47 PM
Correct - thanks for the clarification Colin.

For those that don't know GWT-Ext, it was based on Ext JS 2.0.2 I think. Being unsupported, it's not really a viable choice these days as widget sets, but if you have a lot of panels using it, migration is something you want to do in stages if possible.

The area which concerned me was possible "bleed through" from the ext-all.css that is needed for the old ExtJS lib. Can you confirm whether this is something to worry about or not? There are definitely styles with names which look like they could clash e.g. x-grid etc.

Visually it was immediately easy to see if this was happening on a quick test. Using the F12 dev console in IE, ext-all.css definitely showed up in the hierarchy of styles, but in most cases got crossed out.

I've seen reference to reset.css, which I've now added to our module's .gwt.xml but am not totally clear how this works.

A while back we actually create an Ant script to munge all the old style names in GWT-Ext to be .g-x to avoid clashes. I'm wondering if we're safer still using this, or if GXT3 manages to localise it's styles to avoid any possible bleed through.

Sorry for being a newb here - GWT I'm very experienced with, but CSS confuses the heck out of me still!

Colin Alworth
30 Sep 2013, 8:10 PM
GXT 3 has a very small handful of legacy class names, mostly used as markers rather than styles, these will hopefully all be gone in 3.1, just CssResource generated classnames left.

As far as I'm aware (just searched the codebase), here are the only occurrences of "x-grid" (and other uncompiled classes that are grid related) in gxt 3:

x-treegrid
x-treegrid-column
x-grid-td-numberer
x-grid-footer
x-grid-td-checker
x-grid-hd-checker
x-grid-row-checker
x-grid-row-checked
x-grid-group-hd
x-grid-td-expander
x-expander

All of these are resolved in a mostly-finished 3.1 patch, I'll be going further before we release.

Our reset.css is almost certainly also content that is in Ext JS's css, at least for recent versions (3.x, 4.x) - I'm less sure for 2.x. Honestly, I'd be much more concerned about the ancient version of Ext JS wrapped in an unsupported GWT wrapper (does it run with modern GWT?) - if you do see issues, it may be difficult to see where they are coming from.

walkerr
30 Sep 2013, 9:18 PM
Thanks for the detailed list of styles - next panel I was going to try as a Grid, so will keep an eye out for those specific ones. Any idea when an early cut of 3.1 might be usable if we hit bleed through issues?

The old ExtJS / GWT-Ext stuff is unsupported for sure, which is a concern. It works for everything we're currently using though, so migration is more about creating new panels with a more up to date toolkit, and migrating the old ones as and when we need too.

Colin Alworth
3 Oct 2013, 9:05 AM
We're aiming for a late october public beta: http://www.sencha.com/blog/gxt-roadmap-update/

If you have a support subscription then you can download nightly builds of both 3.0 and 3.1, though the grid patch hasn't landed yet, but should in the next week or so. You can also check out the source from SVN - if you'd like a preview of the patch I can see about that if you file a support ticket.

walkerr
3 Oct 2013, 10:18 PM
Thanks Colin

We're still in the evaluation period - so we don't have support access yet. Having said that, as a potential customer, we'd be very interested to try a 3.1 Beta. It's always easier to base a decision knowing you have the latest greatest version.

-- Rob