Results 1 to 4 of 4

Thread: Sharing models and stores between Extjs5 and Touch

  1. #1

    Default Answered: Sharing models and stores between Extjs5 and Touch

    Hello, I'm trying to achieve the sharing of models and stores between an Extjs5 application and a Sencha Touch application, but I'm having trouble making it work in the ExtJS5 side. I followed the guide to code reusing that is in this link: http://www.sencha.com/blog/reusing-c...cha-space-app/

    I created the projects with all the steps explained in that guide, and created a package that contains all the model and stores called SharedData. I also added the package in the requires property inside both app.json (ExtSpace and TouchSpace).

    The folder schema is this:

    ProjectMainFolder
    |
    |----.sencha
    |----ext (ExtJS5 framework code)
    |----ExtSpace (ExtJS5 app)
    | ----.sencha
    | ----app
    | ----resources
    | ----sass
    | ----app.js
    | ---- ....(more Extjs 5 app files and folders)
    |
    |----touch (sencha touch framework code)
    |----TouchSpace (Sencha Touch app)
    | ----.sencha
    | ----app
    | ----resources
    | ----app.js
    | ---- ....(more Sencha Touch app files and folders)
    |
    |----packages
    |----SharedData
    |----src
    | ----model (folder with all the models)
    | ----store (folder with all the stores)
    |----more folders and files that belongs to the package

    I tried to import models and stores in my Application.js in the ExtJS5 side and in app.js in the Touch side. Like the following:

    Code:
    // Application.js    -   EXTJS5 (ExtSpace folder)
    
    Ext.require([
        'SharedData.*',
        'SharedData.model.*',
        'SharedData.store.*']);
    
    
    Ext.define('MyApp.Application', {
        name: 'MyApp',
        extend: 'Ext.app.Application',
    
        views: ['Main'],
    
        models: [
            'SharedData.model.Model1',
              'SharedData.model.Model2'
        ],
    
        stores: [
            'SharedData.store.Store1',
            'SharedData.store.Store2'
        ],
    
        controllers: ['Main' ]
    });
    
    
    
    //app.js   -   Sencha Touch (TouchSpace folder)
    
    Ext.application({
        name: 'MyTouchApp',
    
        requires: [
            'Ext.TitleBar',
            'Ext.MessageBox',
            'Ext.field.Search',
            'Ext.form.FieldSet',
          ],
    
       models: [
            'SharedData.model.Model1',
              'SharedData.model.Model2'
        ],
    
        stores: [
            'SharedData.store.Store1',
            'SharedData.store.Store2'
        ],
    
        controllers: ['Main'],
    
        views: ['Main']
    
    });
    The result is that the Sencha Touch application is working, but the ExtJS application is not recognizing the full qualified named of the shared classes, so it tries to load the models and the stores from inside the app: (i.e. fail to load from http://localhost/ProjectMainFolder/E...tore/Store1.js ). It looks like Extjs5 doesn't accept full qualifies class names inside models or stores property.

    In the other hand, Sencha Touch recognizes the model and stores names, and it loads it from http://localhost/ProjectMainFolder/p...tore/Store1.js and everything works fine.

    Any workaround or idea for solving this problem?

    Thank you in advance

  2. This is the Ext.application trying to resolve the class name and automatically prepending the applications name to it. You can prevent it by using the @ descriptor:

    Code:
        stores: [
            '[email protected]'
        ],

  3. #2

    Default

    I reply myself just to comment that when I make the build in the Touch application, the stores and models stop to being loaded, and the error received is the same that in ExtJS5 (It tries to load from app/store/SharedData/store/Store1.js).So, it works in development mode, but not in production.

  4. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    This is the Ext.application trying to resolve the class name and automatically prepending the applications name to it. You can prevent it by using the @ descriptor:

    Code:
        stores: [
            '[email protected]'
        ],
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #4

    Default

    Thank you Mitchell, that solved my problem.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •