Need Help On "Porting" An Extension

[chalu]

Hello pals, I am quite new to GXT, especially coming from ExtJS 2.x, and there are some plugins / extensions in Ext Js that I would like to use in my GXT projects. I was wondering if someone has successfully ported a ExtJs extension to GXT, and how. I found this extension here and would like to make a GXT version


Ext.ns("Ext.ux");
Ext.ux.TabStripHide = Ext.extend(Object, {
autoHide: true,
stripHideAnim: true,
constructor: function(config) {
config = config || {};
Ext.apply(this, config);
},
init: function(tabpanel) {
this.tabpanel = tabpanel;

this.tabpanel.autoHide = this.autoHide;
this.tabpanel.stripHideAnim = this.stripHideAnim;
this.tabpanel.toggleHideStrip = this.toggleHideStrip;
this.tabpanel.hideStrip = this.hideStrip;
this.tabpanel.showStrip = this.showStrip;

this.tabpanel.on("render", this.onRender);
if (this.autoHide === true) {
this.tabpanel.on("remove", this.onRemove);
this.tabpanel.on("add", this.onAdd);
}
},
onRender: function() {
this.header.setVisibilityMode(Ext.Element.DISPLAY);
this.header.hidden = false;
if (this.autoHide === true) {
var numTabs = this.items.items.length;
this.header.hidden = (numTabs > 1) ? false : true;
if (this.header.hidden === true) {this.hideStrip();}
}
},
hideStrip: function(doAnim) {
doAnim = (doAnim === undefined) ? this.stripHideAnim : doAnim;
if (doAnim === true) {
this.header.slideOut("t", {
easing: "easeOut",
duration: .5,
remove: false
});
} else {
this.header.hide();
}
this.bwrap.removeClass("x-tab-panel-body-top");
this.bwrap.addClass("x-panel-body-noheader");
this.header.hidden = true;
},
showStrip: function(doAnim) {
doAnim = (doAnim === undefined) ? this.stripHideAnim : doAnim;
if (doAnim === true) {
this.header.slideIn("t", {
easing: "easeOut",
duration: .5
});
} else {
this.header.show();
}
this.bwrap.addClass("x-tab-panel-body-top");
this.bwrap.removeClass("x-panel-body-noheader");
this.header.hidden = false;
},
toggleHideStrip: function(doAnim) {
if (this.header.hidden === false) {
this.hideStrip(doAnim);
} else {
this.showStrip(doAnim);
}
},
onRemove: function() {
if (this.items.items.length === 1) {
this.hideStrip(this.stripHideAnim);
}
},
onAdd: function(tabpanel, tab) {
if (this.header.hidden === true) {
this.hideTabStripItem(tab);
this.showStrip(this.stripHideAnim);
new Ext.util.DelayedTask(function(){
this.unhideTabStripItem(tab);
tab.show();
}, this).delay(500);
}
}
});

Ext.reg("tabstriphide", Ext.ux.TabStripHide);

It's an extension that only shows that tab strip when that tabpanel has two or more tabs, and can be found here (http://www.sencha.com/forum/showthread.php?93758-1.0b3-3.2-beta-Ext.ux.TabStripHide)

Please are there tutorials on making GXT extensions or porting ExtJs extensions for use with GXT.

[chalu]

Please any hints on this ...

[Colin Alworth]

What have you tried so far? I would probably make a ComponentPlugin class with the same logic as you have posted - your impl class can see the tab panel when it is inited, and can add listeners on add/remove to do basically the same thing as your js does.

Keep in mind that writing Java really isn't much like writing javascript, for better and for worse. I would not at all suggest that you try to just wrap the js class in jsni - while it could eventually work, it would be obnoxious to have to make all kinds of java references from the js.