1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Answers
    1
    Vote Rating
    1
    Tequiol is on a distinguished road

      1  

    Default Unanswered: Using ExtJS 4 and Sencha Touch 2 in one application structure

    Unanswered: Using ExtJS 4 and Sencha Touch 2 in one application structure


    Hello,

    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The UI of the two should be different therefore having different logic in the controllers for each.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    27
    Answers
    1
    Vote Rating
    1
    RuBenKlunZ is on a distinguished road

      0  

    Default


    Have you succeeded in combining the two framworks in one application? Because I like to know this as well

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    mcx1985 is on a distinguished road

      0  

    Default


    Me, too!

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2012
    Location
    Boston, MA
    Posts
    44
    Answers
    3
    Vote Rating
    3
    chrisfarrell is on a distinguished road

      1  

    Default also interested

    also interested


    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.

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2012
    Location
    Boston, MA
    Posts
    44
    Answers
    3
    Vote Rating
    3
    chrisfarrell is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    1
    Vote Rating
    0
    jquince@gmail.com is on a distinguished road

      0  

    Default


    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
    [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.*)'

    Thanks,
    Joe

  8. #8
    Sencha User
    Join Date
    Apr 2010
    Posts
    70
    Answers
    3
    Vote Rating
    4
    HriBB is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Apr 2010
    Posts
    70
    Answers
    3
    Vote Rating
    4
    HriBB is on a distinguished road

      0  

    Default


    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.

    common.png

    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?

  10. #10
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Answers
    24
    Vote Rating
    41
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    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.

    EG:

    If you have an app called 'Notes' you could have namspaces 'ExtNotes' and 'TouchNotes' and 'GlobalNotes' - global is shared libs.
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint