1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    9
    Vote Rating
    0
    markc is on a distinguished road

      0  

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

    Unanswered: 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;
        })

  2. #2
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default A simple version ...

    A simple version ...


    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 .
    Joseph Francis,
    CoreLan / Meeting Consultants

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    9
    Vote Rating
    0
    markc is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


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

  5. #5
    Ext User
    Join Date
    Apr 2008
    Posts
    9
    Vote Rating
    0
    markc is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Here is a fancier version

    Here is a fancier version


    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;
        })
    Last edited by Joe; 21 Jul 2009 at 9:16 AM. Reason: Added sample usage based on initial post
    Joseph Francis,
    CoreLan / Meeting Consultants

Thread Participants: 2

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