1. #1
    Sencha User debianw's Avatar
    Join Date
    Mar 2012
    Location
    Costa Rica
    Posts
    48
    Vote Rating
    1
    debianw is on a distinguished road

      0  

    Default Change theme on the fly ?

    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,134
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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
    48
    Vote Rating
    1
    debianw is on a distinguished road

      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,134
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar