Mixing Ext javascript components with GXT Components

[bgrieder]

Hi,

We have legacy code written in Ext Js (e.g pure javascript) and are trying to move to GXT by developping the new UI code using GXT.

To ease things we would like to re-use some of our existing javascript devs while we complete the move to GXT.

I have a TabPanel written using Ext Js; I know its ID.
Can I develop a Panel using GXT and add it to my existing TabPanel ?
If yes, how?

Many Thanks for your replies.
b.

[LINEMAN78]

I have a TabPanel written using Ext Js; I know its ID.
Can I develop a Panel using GXT and add it to my existing TabPanel ?


Yes...


If yes, how?

It is actually quite simple... to make things easier as you begin you can put your whole app in a hidden div
<div style="display: none;"></div> Then you can use the DOM class to getElementById, like you would in standard javascript and get the inner html and create a object that extends widget and set the element of the object to the element you got by id.

[bgrieder]

Hi LINEMAN78,

Thank you for our answer but I am afraid that either you misunderstood our objectives or I misunderstood your answer.


...you can put your whole app in a hidden div

We do not want to rewrite the whole app: we are looking for a migration path.

We have a TabPanel with many TabItems written using the javascript version of Ext. We do not want to rewrite this code using GXT at this stage. What we want to do is to add a new tabItem, written using GXT, to the existing Ext javascript TabPanel.

If I read your answer in a strict way, what you say is to basically do something like this



TabPanel gxtTabPanel = new TabPanel() {
@Override
public Element getElement() {
return DOM.getElementById(myJavascriptTabPanelId);
}
}



IMHO this cannot work since, at a bare minimum, all internal elements of com.extjs.gxt.ui.client.widget.TabPanel are not initialized.



...
private El body, bar, stripWrap, strip;
private El edge, scrollLeft, scrollRight;
...


Sure, we could write a JSNI wrapper for the objects of interest, namely TabPanels and BorderLayouts, but that is a HUGE pain.

What we would ideally need is an equivalent to the good old Ext.getCmp(id) that returns a GXT component based on the DOM id or at least a
new TabPanel(JavaScriptObject existingJSTabPanel) that would parse the Javascript tabPanel Object into a Java GXT TabPanel Object.

Unless we have anything like that, we cannot migrate to GXT unless we do a complete rewrite of the application. In other words there is NO migration path from Ext Js to Ext GWT.

I hope I missed something....

Cheers

Bruno

[LINEMAN78]

Well one thing you will have to decide is do you want to keep the base infrastructure as JS or migrate it to GWT. It sounds from your comments that you are planning to keep it as JS. Because of this it makes things a lot trickier. The simplest way I think you will find is to use GWT as a JS library generator. You can use a library called GWT Exporter, which was written by the authors of Chronoscope, a GWT charting utility, to be able to export their GWT library as a JS library using simple annotations. This way you can create an object to be inserted into the tab panel in GWT and use javascript to instantiate the object and insert it. This will be the easiest way to mix technologies while you are still migrating untill you migrate the base framework. If you need help on using GWT Exporter let me know and I can post some sample code. Also, the guy that wrote it is extremely responsive to e-mail, which was very nice since the library is lacking in the documentation department.

[bgrieder]

Here is half (see below) a solution:





private native String addToJavascriptTabPanel(String tabPanelID, TabItem tabItem) /*-{
var tabPanel = $wnd.Ext.getCmp(tabPanelID);
if ((tabPanel == null) || (tabPanel == undefined)) return null;
//Check if an ID is available; if none, generate one
var tabItemID = tabItem.@com.extjs.gxt.ui.client.widget.Component::getId()();
if (tabItemID == null) tabItemID = $wnd.Ext.id();
//get the tab title
var title = tabItem.@com.amalto.b2een.gwt.client.Home::getText()();
//instantiate the JS Panel
var panel = new $wnd.Ext.Panel({
id: tabItemID,
title: title
});
var tabItem = this;
panel.on('render', function(component) {
var gwtElement = @com.google.gwt.user.client.DOM::getElementById(Ljava/lang/String;)(tabItemID);
tabItem.@com.extjs.gxt.ui.client.widget.Component::setElement(Lcom/google/gwt/user/client/Element;)(gwtElement);
tabItem.@com.extjs.gxt.ui.client.widget.LayoutContainer::layout()();
});
tabPanel.add(panel);
tabPanel.doLayout();
return tabItemID;
}-*/;

private native void activateTab(String tabPanelID, String tabItemID) /*-{
var tabPanel = $wnd.Ext.getCmp(tabPanelID);
if ((tabPanel == null) || (tabPanel == undefined)) return;
tabPanel.activate(tabItemID);
}-*/;



This code will insert an Ext GWT TabItem into an existing Ext JS TabPanel and provides a method to activate the tab. It works fine from a procedural point of view.

The problem is, Ext JS and Ext GWT CSS just do not go well together. Too bad, CSS classes names are not totally different, a lot of the potential issues would not exist....

The bottom line is: unfortunately there is no simple migration path from Ext JS to Ext GWT. We will stick to our current technology and completely re-evaluate our options when we go for a complete rewrite.

Bruno.