Results 1 to 2 of 2

Thread: Load resources on view dinamically

  1. #1
    Sencha User
    Join Date
    Feb 2014
    Posts
    15

    Default Load resources on view dinamically

    Hi,

    In the app I am currently developing, the idea would be to pack 3 different CSS files which will be chosen based on the URL as well as some resources as Icons or images, which might be different based on the URL as well.

    The firt Idea I had was to create a config xml file, which will point to the different resources:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <themes>
        <theme id="1">
            <url>https://url1.com/</url>
            <resourceCss>resources/css/app.css</resourceCss>
            <logo>resources/images/app.Icon1.png</logo>
        </theme>
        <theme id="2">
            <url>https://url2.com/</url>
            <resourceCss>resources/css/custom1.css</resourceCss>
            <logo>resources/images/custom1/Icon2.png</logo>
        </theme>
    </themes>
    based on that file, I create a Customization.js which on the method onLaunch of app.js, saves the correspondent resource based on the url

    Code:
      
    
    config : {
            url:'',
            resourceCss:'',
            logo: '',
        },
    
        constructor: function(config) {
            this.initConfig(config);
            this.callParent([config]);
        },
    
        onStorageCustomizationResources: function(options) {
        /// Check the xml file and saves correspondent resources
            });
        },
    On the views I have a selector, which just gets the resource from this Customization.js file.

    The problem is that those resources are never populated, and I think it is due to the fact that the views are created before of the onLaunch logic takes place, so I don't have a way to assign the variable resources in runtime (but before the app starts). Is there a way to do so? How could I choose the resources before the views get created?

    Thanks in advance for the help!

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    599
    Answers
    35

    Default

    Why not only use one large file and depending on the css you want to use add a new cls to the Viewport.e.g.

    Code:
    Ext.Viewport.addCls('custom-1');
    and in the SASS file

    Code:
    .custom-1 {
        .x-button {
            color: green;
        }
    }
    .custom-2 {
        .x-button {
            color: green;
        }
    }

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
  •