PDA

View Full Version : ExtJS vs Sencha Inconsistencies



ratmat2000
23 Jan 2012, 8:31 PM
There is growing demand for many applications to be provided both on desktop browsers and mobile devices. Sencha Touch is "close" to ExtJS 4.0 but unfortunately not close enough to allow code to be easily ported between the two. Ideally, one would simply swap the sencha and ext JS and CSS files and everything would work. It's very surprising how much Sencha Touch diverged from ExtJS when it seems things could have been kept consistent to allow portability.

Here are a few items I've discovered. Feel free to add to the list:

1) ExtJS viewports extend Ext.container.Viewport which doesn't exist in ST. ST viewports need to extend Ext.Container or subclasses.

2) ExtJS classes are configured with properties not contained in config:{} blocks. ST configurations require config:{} blocks.

3) ExtJS uses dockedItem:[] blocks to dock items while ST uses docked: properties inside the base items:[] block.

4) ExtJS uses the initComponent method which is deprecated in ST2.

mitchellsimoens
24 Jan 2012, 6:57 AM
Most code between the two wouldn't be able to be reused anyway... you are trying to use two very different platforms and interactions with Ext JS simply would not work or look good in ST. On a desktop you can count on pretty accurate clicking of the mouse, on a phone/tablet, you have a finger that isn't as accurate. You can't do a lot of things on screen with ST as there isn't much of a screen unlike on a desktop with Ext JS where you can do a lot of things at once. You would find that most code would be rewritten.

Nothing says that in Ext JS your application viewport has to extend Ext.container.Viewport... it's common but not always the only viewport. In ST, you have Ext.Viewport which is an already instantiated Ext.viewport.* (different viewport classes for different OS) so your Viewport should extend Ext.Component or a subclass which can be added to Ext.Viewport via the fullscreen config. By the way, Ext.Viewport is basically a Ext.Container using card layout.

Ext JS 4 was going to use the config object like ST uses but there wasn't enough time to get it fully baked into Ext JS 4.

Ext JS' layouts are done mainly in JavaScript, in ST they are CSS. Having dockedItems is just a waste of another array and unneeded overhead.

In a perfect world, you should have to use initComponent or initialize. This one doesn't really matter much but it's worth noting that a component is technically rendered (outside the DOM) before initialize is fired (console.log checking it before and after your callParent in constructor).

ratmat2000
24 Jan 2012, 10:39 AM
Thanks Mitch,

I understand the UI differences between web and mobile. What we were hoping to do was house the mobile app inside a desktop browser page and framed by a phone graphic. Users visiting the web site using a desktop browser would be able to try the fully functional mobile web app and be prompted to download the mobile app.

As it stands, ST2 requires webkit which prevents this type of functionality on Firefox and IE. We were hoping that by swapping out the ST2 JS and CSS files with ExtJS JS and CSS files that we could accomodate the mobile web site running inside all desktop browsers.

With the differences in configuration, viewport setup etc, the task is much more complicated as we need to use different sets of files with ExtJS than ST2. If the APIs were a bit more consistent, ideally, we'd only need to swap the framework JS and CSS.

basememara
25 Jan 2012, 1:09 AM
I wish there weren't these inconsistencies too. With MVC, I am hoping to share at least models, stores, and even the application object itself. This way, I can get a single Sencha application to serve different views and controllers from the same instance. The mobile and desktop sites are really just different interfaces layers. The architectures are too simliar to separate them into two applications.

rdougan
25 Jan 2012, 9:51 AM
I wish there weren't these inconsistencies too. With MVC, I am hoping to share at least models, stores, and even the application object itself. This way, I can get a single Sencha application to serve different views and controllers from the same instance. The mobile and desktop sites are really just different interfaces layers. The architectures are too simliar to separate them into two applications.

You can do this already. There is backwards compatibility already built into MVC so you can still define models and stores the way you do in ExtJS 4 (outside the config: {} block).

jay@moduscreate.com
25 Jan 2012, 4:35 PM
The differences are there because in a *lot* of ways, Sencha Touch is way more advanced than Ext JS. There are some minor changes, like "dockedItems" going away and them being set in the "items" config, and "dock" becoming "docked". A lot of these changes were structural, while some of them seem to just have been naming convention items.

One typically says "this toolbar is docked to the top of this panel", rather than "dock this toolbar to the top of the panel".

I too struggle w/ the changes, but most of my experience has been extremely positive after understanding why the changes were put in place. I think that a lot of the Sencha team can vouch for this experience :)

spawn3141
29 Feb 2012, 1:18 PM
I have the problem that default values for a panel will now also apply to buttons in the toolbar. For example if you want to fill the panel with several buttons and all have a fixed width and height I have to set the values for all buttons. If I use the default config the buttons in the toolbar will also be resized.
Is there a way to exclude docked controls?