Results 1 to 4 of 4

Thread: Change theme on the fly ?

  1. #1
    Sencha User debianw's Avatar
    Join Date
    Mar 2012
    Location
    Costa Rica
    Posts
    58
    Vote Rating
    1
      0  

    Default Change theme on the fly ?

    Is there a way in Touch 2 to change the global theme on the fly ?.

    I have an app that requires a different skin depending on which section you are.

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    100
      0  

    Default

    I was doing some research into this a little over a year ago and I did have a working solution. Unfortunately, I don't have access to that old code (from ST1.0), but I did discover and modify something else:

    (It isn't necessarily from the Sencha Touch framework, but it does use JavaScript)

    You can try using this to remove css files:
    Code:
    //in your change function...
    
    var scripts = document.getElementsByTagName('script'); //or document.scripts
    
    
    Ext.Array.each(scripts, function(script, index) {
        var extIdx = script.src.indexOf('.css') + 4,
            src       = script.src;
        if(extIdx !== -1) {
            var begIdx = 0;
            for(var i = src.length; i > 0; i--){
                if(src[i] == "/"){
                    begIdx = i;
                    i = 0; //end loop
                }
            }
            var file = src.substring(begIdx, extIdx)
            removejscssfile(file);
        }
    });
    
    
    
    //---------------------------------------------------------------------------------------
    //you can put this in the index.html or create a function to use in your app
    
    
    /**
     * This is remove all instances of 'filename.filetype' on the page
     */
    function removejscssfile(filename, filetype){
        //determine element type to create nodelist from
        var targetelement=(filetype=="js") ? "script" : (filetype=="css") ? "link" : "none";
        
        //determine corresponding attribute to test for
        var targetattr=(filetype=="js") ? "src" : (filetype=="css") ? "href" : "none";
        
        var allsuspects=document.getElementsByTagName(targetelement);
        
        //search backwards within nodelist for matching elements to remove
        for (var i = allsuspects.length; i >= 0; i--){
            if(allsuspects[i]
                && allsuspects[i].getAttribute(targetattr) != null
                && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1
              ){
                //remove element by calling parentNode.removeChild()
                allsuspects[i].parentNode.removeChild(allsuspects[i]);
            }    
        }
    }
    You can try this for adding the file:
    Code:
    /**
     * Sample output would be added to the <head> of the document
     * <link rel="stylesheet" href="resources/css/filename.css" type="text/css" media="screen">
     */
    function addCSSfile(filename){
        var headID = document.getElementsByTagName("head")[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = 'resources/css/' + filename + '.css';
        cssNode.media = 'screen';
        headID.appendChild(cssNode);
    }
    I haven't really tested it but I think it could work.

    If it doesn't, I hope it gives you more insight on it

  3. #3
    Sencha User debianw's Avatar
    Join Date
    Mar 2012
    Location
    Costa Rica
    Posts
    58
    Vote Rating
    1
      1  

    Default

    Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

    Example:

    Code:
       CSS.swapStyleSheet('android'); 
       CSS.swapStyleSheet('bb6'); 
       CSS.swapStyleSheet('apple');
    Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

    I built a little demo too.

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    100
      0  

    Default

    Quote Originally Posted by debianw View Post
    Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

    Example:

    Code:
       CSS.swapStyleSheet('android'); 
       CSS.swapStyleSheet('bb6'); 
       CSS.swapStyleSheet('apple');
    Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

    I built a little demo too.
    SwapStyleSheet, that's what it was! thanks debianw

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
  •