ext-core equiv of Ext.util.CSS.swapStyleSheet()

How would I best emulate the ExtJS swapStyleSheet() function using only ext-core.js?

Code:

---

    var origStyle = true;
    Ext.get('swapper').on('click', function(){
      if (origStyle){
        Ext.util.CSS.swapStyleSheet('ss', '/lib/css/sec.css');
      } else {
        Ext.util.CSS.swapStyleSheet('ss', '/lib/css/light.css');
      }
      origStyle = !origStyle;
    })

---

It depends on what aspect of this function you are using.

If all you really want to do is swap out a css, then you can do this ...

a) Create a link to the css with an id

HTML Code:

---

<link id="toswap" href="...

---

b) Create a var to hold a dom reference
var toswap = Ext.getDom('toswap');

c) When you want to change the url, just change the href
toswap.href = "<NEW CSS FILEPATH>"

This mthod works in all browsers (ie 6,7,8, FireFox 3x,Chrome) and is simpler than removing and re-adding the link in the dom head and won't effect the order of your css.

More Complex Usage
If you are using the ascpect of the function that creates the link dynamically if it does not exist and assigns the supplied ID, then you'll want to do that using normal JS, much like the library does.

Note: If you want to emulate the process of removing and re-adding the link in the HEAD via dom manipulation, don't try to use DomHelper because of how it adds dom elements you create by way of a spec. It seems to insert HTML for this type add (which won't work in this case) .. hence the ExtJS code not using DomHelper I assume, but am open to correction :).

Wow, thank you for an excellent reply. Unfortunately I had to continue the project I am working on with jQuery so, for now, the chance I had to invest in understanding and using Ext is gone but I'll certainly give it another go the next time I get a spare evening and will try your suggestion. It should have been a simple swapover from jQuery as I only needed Ajax calls (that was fine) and a method to swap stylesheets... but I just couldn't find a close enough ExtCore example to give me the right methodology and syntax.

Essentially speaking, the concept of swapping stylesheet is same, just like Joe's demonstration, no matter which library you choose to implement. ;)

Well I think that assumes a fair degree of experience with a number of frameworks to understand the pattern. All I had to go on was the ExtJS example above and my working jQuery example...

Code:

---

$('.styleswitch').change(function() {  switchStylestyle(this.options[this.selectedIndex].value);return false;});
function switchStylestyle(styleName) {
  $('link[@rel*=style][title]').each(function(i) {
    this.disabled = true;
    if (this.getAttribute('title') == styleName) this.disabled = false;
  });
  createCookie('style', styleName, 365);
}

---

Between the above jQuery instance and Joes' suggestion I guess I could work it out with ExtCore in one evening.

While playing around with ways to swap style sheets I had made a version that is more dynamic and more error friendly then my earlier post. I didn't post that version due to it being an overly complex solution when an easy one for your end result may have been more appropriate.

Since you are learning, seeing this code may help.

Good Luck with your project.

Sample Functions

switchCSS
Creates or swaps out a css by passing the id/element and the url for the new css file.

link: Pass a string id of the link or the element to effect. The element can be either the dom element or an Ext Element that is the link you want to swap out.
Note: If a string value is passed and no element is found, one will be created and the ID set the value of link.
newurl: The string URL of the new css file.

Code:

---

function switchCSS( link, newurl){
        if( !newurl ){return};
        var elem = link.dom || Ext.getDom(link);
        if (!elem && typeof(link) !== 'object'){
                //--- No link exists and we are looking for a string ID - then Add one to the header
                elem = document.createElement('link');
                Ext.apply( elem, {
                        rel: 'stylesheet',
                        type: 'text/css',
                        href: newurl
                })
                //--- assume if a link is passed and it does not exist, the string passed must be id
                if( typeof(link) !== 'object' ){elem.id = link};
                //--- Append to header - one time operation per ID
                Ext.fly(document.getElementsByTagName("head")[0]).appendChild(elem);
        };
        //don't crash even if I pass invalid stuff
        if (!elem){return};
        elem.href = newurl;
}

//Sample usage
var someurl = 'demo2.css';
switchCSS( 'toswap', someurl );
//or
switchCSS( cssDom, someurl );
//or
switchCSS( cssElement, someurl );

---

switchCSS
Finds a css by filename and swaps it out

filename: A string that is just the filename including .css. Do not use the path.
newurl: The string URL of the new css file.

Code:

---

//--- Function that swaps by filename if found
function switchCSSByName( filename, newurl){
        var elem;
        var finder = Ext.DomQuery.select("link[href$=" + filename + "]");
        if( finder.length == 1){elem = finder[0];};
        if (!elem){return};
        elem.href = newurl;
}

//Sample Usage
switchCSSByName( 'demo1.css','css/demo2.css' );

---

Since your usage fits one of the supplied patterns, you should be able to pop in the above code and use this ...

Code:

---

var origStyle = true;

    Ext.get('swapper').on('click', function(){
      if (origStyle){
        switchCSS('ss', '/lib/css/sec.css');
      } else {
        switchCSS('ss', '/lib/css/light.css');
      }
      origStyle = !origStyle;
    })

---