gxt-all.css for gxt 2.3.1a - extjs

I upgraded from GXT 2.2 to 2.3.1a to prep for an upgrade to 3.x (it's gonna be painfull). Looks like there is a bug in MenuItem which can be fixed by overridding a method in MenuItem or the gxt-all.css for 2.3.1a. (search for: migration-to-gxt2.3.1-grid-header-menu-no-longer-displays-properly. on the Sencha Forum; sorry, troubles getting a link to work here :(
Anybody have a link to a site where I can download this (and whatever else I need). All I got are the distributed JAR files. Thanx. ~r

2.3.1 is only available for support subscribers.
You can download 2.3.0 here:
http://dev.sencha.com/deploy/gxt-2.3.0.zip
Although, your problem seems to be fixable only by overwriting the MenuItem class, like this:
Overwrite the onRender()-Method in com.extjs.gxt.ui.client.widget.menu.MenuItem.java and change
setElement(DOM.createSpan(), target, index);
to
setElement(DOM.createAnchor(), target, index);

I'm not completely sure of the GXT background... but it appears it was bought by Sencha a few years ago and now you pay for the GXT framework. Point being is that legality of its use should be reviewed.
That being said, an alternative solution to your problem would be to style the MenuItem or add a styled wrapper class. Adjusting the padding on the MenuItem should give you the look you are accustom to. The GXT 2.3.1 showcase can be reviewed here and using a web development tool like Firebug you can get a better understanding of what kind of CSS rules were used to style the MenuItem in 2.3.1.

Related

Odd behavior in code repo and link to my open source git repo

Now that things are sort of getting stable, I am still doing the codename one todo app demo and got to the point where I added underlines under the label/checkbox. My git repo is
https://github.com/deanhiller/codenameOneExamples
****EDIT
I just published my build and ran on android phone and the basic todo app is not working either. I am not sure what's wrong, and if I can't fix this it may be time to jump ship and create two apps(one swift and one android studio...bleck ). I really like this concept and at 70/month, codeone was not a bad deal for what we need.
****END EDIT
If I click + 3 times though, the screen looks like this (settled on using intellij 2019.1.4 with codename 6.5.1 on MacOS Catalina 10.15.4). This is not what the demo should look like though.
and thanks at the amazing support Shai.
It seems you only defined the styles for the unselected theme. This means that when an entry is selected or pressed it's unstyled. You can see this by opening the theme in my repo and comparing it to your theme.
Since I wrote that book we've slowly moved to styling with CSS which isn't very different from the content of the book (slightly different syntax). That makes things like that easier since CSS implicitly defines all the 4 styles in the same way and changes things for a specific style explicitly. This is a bit more convenient. It's also easier to treat styling as code even though I'm not a fan of CSS.
The nice thing if you can "live edit" CSS which means changes instantly show in the simulator without interaction.

How to upgrade Ext-4 to Ext-6 library

I want to upgrade Ext-4 to Ext-6 library and We want to change the theme of the form to Triton in project.
Here is official Sencha's guide on migration from ExtJS4 to ExtJS5, using Sencha CMD:
https://docs.sencha.com/cmd/guides/cmd_upgrade_five.html
And from ExtJS5 to ExtJS6:
https://docs.sencha.com/cmd/guides/cmd_upgrade_guide.html
Also, get to know what is Microloader, which is one of the major changes in ExtJS5: https://docs.sencha.com/cmd/guides/microloader.html
From my personal experience migrating from ExtJS5 to ExtJS6 was very painful. There's a lot of small caveats like, Ext.data.Store, in ExtJS6, starts loading data with delay, if config asynchronousLoad: false not specified. Generally, I would recommend you to look at release notes for every version of ExtJS, that was released after the version you currently use, although not every change will be specified there.

Example of a Sencha Extjs custom button UI

I'm trying to create a custom button ui using version 4.1.3 of Sencha's Extjs SDK and I keep getting errors when trying to compile my sass file with compass. I've tried troubleshooting it myself, searching around for answers online, and posting to the Sencha forum for help and I can't seem to find an answer.
Does anyone have or know of an example file with a working custom button UI implemented? I'm sure there's just one small setting or configuration I have wrong, so comparing what I have to a sample file would be incredibly helpful.
Thanks.

Sencha Touch application with grid

I have been using ExtJS for a while now, and used it build an application that gets data in JSON format and presents it to the user in a grid. I want to replicate this application on mobile devices. I've looked at the examples for Sencha Touch, but I was not able to find an example of a grid.
I want build a grid with a grouped header - something like this, using Sencha Touch.
I also looked at the documentation of Sencha Touch components but could not find anything.
Please let me know what options I have to build a grid using Sencha Touch. Is it possible to create a grid with multiple headers using Sencha Touch?
If you have a commercial license for Sencha Touch (and a small budget), you can check out the UberGrid component developed by Bryntum. Unfortunately, though, the license isn't compatible with Sencha Touch GPL - details can be found at the Bryntum FAQ, including information about discounts for charitable/educational applications.
Short of that, you'll have to either find a community extension or build your own, as Sencha Touch doesn't include any built-in grid component.
I realise that this question is old. But Sencha since then seem to have released a grid (albeit in paid versions).

Calendar hide/show works no more with Extensible 1.5 and ExtJS 4.1

I have ported an existing Extensible calendar-app to Extensible 1.5 with ExtJS 4.1. Since then a calender cannot be hidden/shown anymore when clicking on it or using the context-menu for only showing the selected calendar.
After extensive research I found the relevant place and bugs in the code:
extensible-all-debug.js:4559 rec.set([CM.IsHidden.name], !isHidden);. It will add a new attribute 0: "IsHidden" to rec.data, which definitely cannot be correct. When changing to rec.set(CM.IsHidden.name, !isHidden); it works but I am in no way interested in hacking the Extensible code.
I found out that the 'TestApp'-Example of Extensible uses ExtJS 4.0.7 where everything works fine. I changed the Extensible-config.js to use ExtJS 4.1 by changing the extJsRoot to 'http://cdn.sencha.io/ext-4.1.0-gpl/'.
Now 'TestApp' is using ExtJS 4.1 and is broken too (hide/show won't work anymore), so there is definitely a bug, maybe Extensible but I think its more related to ExtJS 4.1 because as I stepped into the rec.set-Method of both versions (4.0.7 and 4.1) they seem to differ very much, so it could be that ExtJS 4.1 breaks something Extensible relys on.
To reproduce the Bug:
Change extJsRoot in `Extensible-config.js` to 'http://cdn.sencha.io/ext-4.1.0-gpl/'
Open 'TestApp' locally.
Add a break-point at `extensible-all-debug.js:4559`.
Show/Hide a calendar.
Break-point hit, one step further.
Inspect rec.data, should have a new attribute `0: "IsHidden"`.
Continue script, calendar won't get hidden/shown.
I posted a work around for this issues to the support forum at http://ext.ensible.com/forum/viewtopic.php?f=3&t=570
Gabe

Resources