Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: Referencing resources from packages in dev mode

  1. #11
    Sencha User
    Join Date
    Apr 2014
    Posts
    110

    Default

    Is there a solution yet?

    I tried it with:
    Code:
    this.resourceDir = 
    Ext.Loader.getPath( this.$className).replace('src/helper/ResourceManager.js','' ) + 'resources/';
    But it works only in dev mode.
    Is there a variable for the resources folder?

  2. #12

    Default

    Hello,

    Any official solution on this ?
    I have the same useCase as @HeikoErhardt

    Thanks in advance

  3. #13
    Sencha Premium User
    Join Date
    Nov 2013
    Location
    Piacenza, Italy
    Posts
    220

    Default

    I found some methods that could help in some way, but I'm not sure:
    For SCSS: get-resource-path()
    For JS: Ext.getResourcePath()

    See here for documentation:
    https://docs.sencha.com/cmd/guides/r...resource_paths
    https://docs.sencha.com/cmd/guides/r...ared_resources

    There is also this method which internally calls Ext.getResourcePath():
    Ext.resolveResource()
    http://docs.sencha.com/extjs/6.2.1/c...esolveResource

  4. #14
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Quote Originally Posted by Chris Thornhill View Post
    I've found a solution, adding the following to .sencha/app/development.properties:

    build.resources.dir=${app.output.resources.path}

    I'm curious to know if this is the best approach for developing with packages that provide their own resources (i.e. images).

    Thanks.
    This helped me with my issue... thanks for pointing this out!

  5. #15
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    113

    Default

    With Sencha Cmd 6.5.2.12 and Ext JS 6.5.0.775, the CSS configurations for packages are appended to the application configuration as part of the application's production build. Therefore, package CSS files need to be defined as remote in the production environment. They will get copied to the package's resource directory with the rest of the package's resources. Paths defined in the CSS files should be relative, because the resource directory will be different between development and production environments.

    Code:
    "development": {
        "css": [{
            "path": "resources/css/${package.name}.css"
        }]
    },
    
    "production": {
        "css": [{
            "path": "${app.output.resources.path}/${package.name}/css/${package.name}.css",
                /* The file will be copied along with the rest of the resources.
                    https://www.sencha.com/forum/showthread.php?291559 */
                "remote": true
            }]
    }
    If package CSS files are not defined as remote in the production environment, they will be duplicated and the application will load the duplicate that is not positioned properly relative to the other resources.

    resources/css/package-css.css
    {build.id}/resources/{package.name}/css/package-css.css
    {build.id}/resources/{package.name}/images/package-image.png



    With Sencha Cmd 6.5.0.180 and Ext JS 6.5.0.775, not defining the CSS configuration for the package production build results in the CSS and image resources being duplicated in the application's root resources directory as well as the under the build ID.

    resources/css/package-css.css
    resources/images/package-image.png
    {build.id}/resources/{package.name}/css/package-css.css
    {build.id}/resources/{package.name}/images/package-image.png


    This works, because the package CSS references resources relative to the root resources directory, and the resources do not conflict with the application. However, the CSS configuration is required for the development build. Defining the following in the package config.json file solved that issue, but the resources remain duplicated in the production build.

    Code:
    "development": {
        "css": [{
            "path": "resources/css/package-css.css"
        }]
    }
    Last edited by Trevor4001; 4 Jan 2018 at 2:46 PM. Reason: correction

  6. #16
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253

    Default Sample of a package on how I do it

    I put the production files as remote, for they sometimes conflict with the Sencha build for production. The sample below is how I have done many packages with third-party CSS and javascript.

    Code:
    {
      "name": "ext-markdown-panel",
      "namespace": "MarkdownPanel",
      ...
      "resources": [
        {
          "path": "resources",
          "output": "shared"
        }
      ],
      "production": {
        "js": [
          {
            "path": "resources/ext-markdown-panel/remarkable/dist/remarkable.min.js",
            "remote": true
          },
          {
            "path": "resources/ext-markdown-panel/jsOnlyLightbox/js/lightbox.min.js",
            "remote": true
          },
          {
            "path": "resources/ext-markdown-panel/highlight.js/highlight.pack.js",
            "remote": true
          }
        ],
        "css": [
          {
            "path": "resources/ext-markdown-panel/github-markdown-css/github-markdown.min.css",
            "remote": true
          },
          {
            "path": "resources/ext-markdown-panel/jsOnlyLightbox/css/lightbox.min.min.css",
            "remote": true
          },
          {
            "path": "resources/ext-markdown-panel/highlight.js/styles/github.css",
            "remote": true
          }
        ]
      },
      "development": {
        "js": [
          {
            "path": "resources/remarkable/dist/remarkable.js"
          },
          {
            "path": "resources/jsOnlyLightbox/js/lightbox.js"
          },
          {
            "path": "resources/highlight.js/highlight.pack.js"
          },
          {
            "path": "resources/highlight.js/line-numbers/highlight.line.numbers.min.js"
          }
        ],
        "css": [
          {
            "path": "resources/jsOnlyLightbox/css/lightbox.css"
          },
          {
            "path": "resources/highlight.js/styles/github.css"
          }
        ]
      }
    }

Page 2 of 2 FirstFirst 12

Posting Permissions

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