ExtJs2.0 Learning Series (--EXTJS) Change skin

ExtJS's default skin looks good, but we can also change styles to switch other skins.

1. Add other CSS files directly to change skin.

Skin file: Xtheme-olive.zip download

Unzip the skin file and copy the CSS file (such as XTHEME-OLIVE.CSS) to the ExtJS resources directory in the CSS folder:

Unzip the skin file and copy the contents of the corresponding image folder (such as Olive) into the ExtJS resources directory under Images folder

Set the CSS file as follows:

In fact, in the original based on the addition of a xtheme-olive.css file.

Effect Chart:

2. With cookies to achieve the website skin Change

Our goal:

/*
    Users can choose their own style, when the next user opened the site (within the validity of the cookie), automatically read cookies, display the previous choice of hobby style!
*/

Our principle:

Key points
1.document.getelementsbytagname ("link") [1].href//Gets or sets the href value of the second CSS file
2.var date=new Date ()/day
  Date.settime (Date.gettime () +30*24*3066*1000);//30 days after the date
  Document.cookie= "css=" +name+ "expires=" +date.togmtstring ()//Set expired cookies after 30 days (name is CSS)
3.var cookiesarr=document.cookie.split (";");
  var css;
  for (Var i=0;i<cookiesarr.length;i++)
  {
       var arr=cookiesarr[i].split ("=");
       if (arr[0]== "CSS")
       {
          CSS=ARR[1];
          Break
       }
  }
This code is to obtain cookies in the name of the desired CSS, and save in the variable CSS