View Full Version : ExtJs from Sencha Touch

14 May 2013, 10:48 PM
We have developed an app by using Sencha Touch and we're planning to release a web version of the same.
Found out ExtJs is the best thing to use.

Is there any tutorial on how to move from Sencha Touch to ExtJs?


14 May 2013, 11:00 PM
I don't believe there is.
Main differences:
- No config object, a config is a property
- No setter or getter functions for config generated in ExtJS - a config is the same as a property I access it directly
- Far more rich components available in ExtJS
- There are lots of subtle differences in terms of function and config names, these you will only find by trial and error

A lot of the data store and model functionality is similar.

We have shared code between our Touch app and ExtJS app by creating controllers whose purpose is code sharing rather than traditional Sencha controllers that are tightly bound to the view.

See http://deftjs.org/

14 May 2013, 11:21 PM
We have already built the mobile app and looking to port it to web. So using deftjs would be modifying the present app even which we don't want to do.

So we will have to rewrite the complete view part???

Doesn't that mean redesigning the complete app once again???

Isn't there no easy way to do it???

15 May 2013, 5:19 PM
The answer is yes and no, depending on your app. While there are some similarities in components, the components you use for ST app (for example, a list view) don't have 1-to-1 analogs in ExtJS...they are different for very specific reasons.

But this is the point of MVC, right? If you design your model and controllers intelligently, the view can change for any variety of platforms with very little effort. Is there *some* effort? Absolutely...but you will find this with any direction that you go.

14 Aug 2013, 1:39 AM
Rewriting the view part is not the problem, imo. They ARE just different in mobile and desktop apps.

But why the hell are the ways to define classes or instances of classes different in Sencha Touch and ExtJS?
Sencha Touch is completely based on the "config" property, ExtJS is not (although it is prepared for I guess). That makes it nerly impossible to share code between the two frameworks.

We are trying to do an app for both mobile and desktop using the same data structures. But it fails defining model classes.

IMO, the complete Ext.data.*- structure, Ext.Element, Ext.util.*, XTemplates and all those things that aren't UI based should be the same. Especially the data-part.

Are there any plans to bring those into line?


14 Aug 2013, 2:03 AM
Hi Makana,

It is difficult but not impossible.
If you use controllers that are not sencha view controllers you can share the bulk of code between the 2 frameworks.
Using overrides and adapters to deal with some key differences.
The reason they are different is 2 fold - both frameworks came from different sources and were maintained by separate teams.
The frameworks have started to merge and share a common code base but as you know there is a long way to go.

At Sencha conference Sencha announced they are introducing touch events to ExtJS and are going to merge more of the two frameworks.
They are adding richer UI components to the Touch framework so it maybe worthwhile if you dont have to deliver to IE 6,7,8,9.. :) then I would code in Touch with extensions and deliver to Desktop, tablet and mobile. Reason being touch is html5 uses CSS3 for layouts and is more lightweight.

However it is missing a number of rich UI components but if you are comfortable with coding your own extensions you can write your own.

Mobile and desktop are quite different and typically have very different UX interaction so should be quite different in design.
Issues occur delivering to desktop, tablet and touch desktop, where the UI may not differ much at all.

14 Aug 2013, 3:02 AM
Hi suzuki1100nz,

thanks for your immediate reply.

No problem writing views/controllers separate for mobile and desktop applications. They are different indeed.
My problem is to reuse model classes in both frameworks.
But since I use onClassExtended to prepare server generated stuff, I go further by doing things like "data.fields = data.config.fields = myPreparedFields;"

14 Aug 2013, 11:28 AM
In addition to the other tips in this thread, there's a handy reference on the API differences between ExtJS and Sencha Touch - you can check it out here (http://evanhahn.github.io/ExtJS-vs.-Sencha-Touch/the.html).