View Full Version : Using ExtJS 4 and Sencha Touch 2 in one application structure

7 Mar 2012, 6:55 AM

I'm currently thinking about a solution that combines a solution for desktops, tablets and mobile phones in one application. All defined stores, models, utils and most of controllers would easily work in both application frameworks.

There is already a profile system in Sencha Touch (as explained in the docs: http://docs.sencha.com/touch/2-0/#!/guide/profiles).

The general structure of the application in both frameworks is the same. The docu describes to put special views in app/view/tablet/ oder app/view/phone, same for the controllers. So why not having app/view/desktop for special views in extjs.

To decide the usage of the desktop or mobile version, I'm using the same technique as for normal webpages. So the websites decides to load ExtJS and the desktop.app.js oder Sencha Touch and the mobile.app.js.

I'm not sure, if this works and if it's the correct way to mix the application framework. Is there any sample how to correctly combine the frameworks into one project?

7 Mar 2012, 10:58 AM
The UI of the two should be different therefore having different logic in the controllers for each.

26 Apr 2012, 2:07 AM
Have you succeeded in combining the two framworks in one application? Because I like to know this as well

21 May 2012, 6:32 AM
Me, too!

17 Sep 2012, 7:10 PM
I am also interested in a discussion of how to approach the extjs/touch dual framework for a single site.
I have only just started to research the issue, and am relatively new to the Sencha eco-system.
I have yet to take a stab at it, but, will be doing so soon.

From what I can tell, there are no definitive Sencha articles or examples prescribing exactly what to do.
I have not turned over every stone and have yet to find a golden thread.

Based on my googling I'm seeing a few POV's:

1. Simply don't reuse, write two separate code bases and direct the user to the appropriate one.
This actually seems like a viable option to get started. It may be quicker to code in silo's for each framework and refactor as the opportunities arise.

2. It is suggested by some that the views and their controllers are going to be so different that you shouldn't even try to reuse them. Others will propose approaches for abstracting the views into a custom xml. And then there's DeftJS claiming to be the solution. If the controllers are so different though, I don't know how DI helps you with reuse.

3. Most frequently, I've read that you can only reuse the models and stores. However, I've also seen people say you have to jump through a few small hoops in order to make it possible.

4. Somewhere, I saw a post claiming that you can just load both frameworks and intermingle as needed, but there was no further explanation and I don't like the sounds of that.

5. GluJS. I'm not sure. Glu Seems to make a lot of awesome promises, but it's not clear to me if it solves this particular problem. And, I've read very compelling arguments for why not to use it. So, maybe a non-starter.

I will start with No. 1. And, I'll probably include DeftJS from the get go because I see real value in DI whether or not it helps me share code between the two.

26 Sep 2012, 7:55 PM
My experience so far is incomplete, but what I have accomplished is:

- using Cmd v3, generate a workspace
- in that workspace, generate an ext app
- in that workspace, generate a touch app
- in that workspace, add a 'common' directory

I am working on getting my ext app to build correctly, and then I will get my touch app to build correctly, and then I will look for ways to share common code. The generated models for touch seem to wrap their fields in a config object, so a translator may be needed. Not sure.

8 Feb 2013, 2:08 PM
So here's what I have so far.

A Touch project: This has been in development for a while and is the source for the shared models.
A share project : consisting of models and utilities...later hopefully stores...some controllers
A desktop project: Mainly needed to support IE

I am not trying to load Touch and Extjs in the same page.
I do think they should be able to share core functionality even if there is some divergence in the UI.

When I run the Touch project with the shared models, I get deprecation warnings:
[DEPRECATE][Anonymous] fields is deprecated as a property directly on the Model prototype. Please put it inside the config object. Console.js:35 (http://localhost/ehrtablet/sdk/src/log/writer/Console.js)
[DEPRECATE][Anonymous] validations is deprecated as a property directly on the Model prototype. Please put it inside the config object.
I would like to know if at their core will the Sencha SDKs converge? (particularly Ext.data.*, Ext.app.*)'


8 Sep 2013, 1:48 PM
Hi guys. Any progress on this? I have searched the forums and google all over but found nothing that could help me.

Sencha any comments on this?

+1 for official code reuse example/best practice

8 Sep 2013, 3:00 PM
I managed to solve the "sharing code between extjs & touch app" problem by creating a new workspace (WS) with both extjs and mobile apps. Then I created two symlinks in WS/web/app/common and WS/mobile/app/common that point to WS/common folder. I also created a simple mixin (App.common.Test) and mixed it in both Main controllers to check if this works as expected ... and it does. Also, "sencha app build" works as expected. Need to separate build paths if App name is the same, though. See the attached image for the folder structure.


I used mklink to create symlinks on win7:
mklink /D D:\Wamp\www\test\mobile\app\common D:\Wamp\www\cbcommon\common

I am sticking to the old structure for now, hoping that devs @ Sencha will provide us with an official way of sharing code between ExtJS and Touch apps.

What are your thoughts on this solution?

8 Sep 2013, 5:34 PM
create a global folder and then just set it up in your paths in your application, then namespace global shared bits with a global namespace:

Global.data.proxy.reader.Pipe = Global/data/proxy/reader/Pipe by setting 'Global':'/root/global' in app (or whatever relative mapping, then use virtual directory to include. Works for command also.

I do this with all ux also now. Saves having redundant copies in every app. Could easily be also used for shared app. Once again create three apps, one for extjs, one for touch, one for shared. This setup also works really well for Sencha Architect so you can use the config to edit your custom extensions.


If you have an app called 'Notes' you could have namspaces 'ExtNotes' and 'TouchNotes' and 'GlobalNotes' - global is shared libs.

9 Sep 2013, 12:25 AM
I think Pacakages (http://docs.sencha.com/extjs/4.2.1/#!/guide/command_package_authoring) may help with handling common part of applications. Ideally views must abstract the presentation from controllers, so that will be the only namespace with differences between two apps.

9 Sep 2013, 3:34 AM
You're right! But even better, for simple code reuse just use app.classpath in sencha.cfg


9 Sep 2013, 3:36 AM