<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-<title>Ext JS Themes Example</title>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Ext JS 4 Themes</title>
+ <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <!-- Standard includes -->
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-blue.css" />
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../ext-all-debug.js"></script>
+ <script type="text/javascript" src="../../bootstrap.js"></script>
- <!-- Theme includes -->
- <link rel="stylesheet" type="text/css" title="blue" href="../../resources/css/xtheme-blue.css" />
- <link rel="stylesheet" type="text/css" title="gray" href="../../resources/css/xtheme-gray.css" />
- <link rel="stylesheet" type="text/css" title="access" href="../../resources/css/xtheme-access.css" />
- <link rel="stylesheet" type="text/css" title="yourtheme" href="../../resources/css/yourtheme.css" />
- <!--
- By default, yourtheme.css is an exact copy of x-themeblue.css.
- Customize your theme by editing yourtheme.css and customize your
- own images in the images/yourtheme/ directory.
- -->
+ <script type="text/javascript" src="themes.js"></script>
- <script type="text/javascript" src="themes.js"></script>
- <script type="text/javascript" src="styleswitcher.js"></script>
-
- <style type="text/css">
- body {
- font-family: 'Helvetica Neue',tahoma,helvetica,sans-serif;
- font-size: 12px;
- }
-
- h1 a:link, h1 a:visited {
- color: #046BCA;
- }
-
- h1 a:hover, h1 a:focus, h1 a:active {
- color: #1C417C;
- }
-
- div#header {
- height: 65px;
- width: 1090px;
- padding: 25px 0 10px 0;
- margin: 0 50px;
- }
- div#header h1 {
- font-family: MyriadPro-Semibold, 'Myriad Pro Semibold', 'Myriad Pro', 'Trebuchet MS', Tahoma, arial, sans-serif;
- font-size: 250%;
- }
- .x-viewport body {
- overflow: auto;
- }
- form#styleswitcher {
- background-color: #f3f3f3;
- background-color: rgba(243,243,243,.333);
- border: 1px solid #ddd;
- border-color: rgba(221,221,221,.333);
- border-radius: 8px;
- -moz-border-radius: 8px;
- -ms-border-radius: 8px;
- -o-border-radius: 8px;
- -webkit-border-radius: 8px;
-
- float: right;
- padding: 8px 10px;
-
- width: auto;
- }
- form#styleswitcher select {
- font-size: 16px;
- line-height: 16px;
- }
- div#header h1 span {
- color: inherit;
- font-family: 'Helvetica Neue',tahoma,helvetica,verdana, sans-serif;
- font-size: 12px;
- font-weight: normal;
- line-height: 16px;
- padding-left: 25px;
- }
- </style>
-</head>
+ <style>
+ h1 a:link, h1 a:visited {
+ color: #046BCA;
+ }
-<body>
- <div id="header">
- <form id="styleswitcher">
- <label for="styleswitcher_select">Choose Theme: </label>
- <select name="styleswitcher_select" id="styleswitcher_select">
- <option value="blue" selected="true">Blue Theme</option>
- <option value="gray">Gray Theme</option>
- <option value="access">Accessibility Theme</option>
- <option value="yourtheme">Your Theme</option>
- </select>
- </form>
- <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.extjs.com/products/js/themes.php">Ext Themes</a>, or, your own custom themes.</span></h1>
- </div>
-</body>
+ h1 a:hover, h1 a:focus, h1 a:active {
+ color: #1C417C;
+ }
+
+ div#header {
+ height: 65px;
+ width: 1090px;
+ padding: 25px 0 10px 0;
+ margin: 0 50px;
+ }
+ div#header h1 {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 24px;
+ font-weight: 600;
+ }
+ form#styleswitcher {
+ background-color: #f3f3f3;
+ background-color: rgba(243,243,243,.333);
+ border: 1px solid #ddd;
+ border-color: rgba(221,221,221,.333);
+ border-radius: 8px;
+ -moz-border-radius: 8px;
+ -ms-border-radius: 8px;
+ -o-border-radius: 8px;
+ -webkit-border-radius: 8px;
+
+ float: right;
+ padding: 8px 10px;
+
+ width: auto;
+ }
+ form#styleswitcher select {
+ font-size: 13px;
+ line-height: 13px;
+ }
+ div#header h1 span {
+ color: inherit;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 30px;
+ padding-left: 25px;
+ }
+ body {
+ padding-bottom:10px;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div id="header">
+ <form id="styleswitcher">
+ <label for="styleswitcher_select">Choose Theme: </label>
+ <select name="styleswitcher_select" id="styleswitcher_select">
+ <option value="index.html" selected="true">3.x Theme</option>
+ <option value="index-gray.html">Gray Theme</option>
+ <option value="index-access.html">Accessibility Theme</option>
+ </select>
+ </form>
+
+ <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.sencha.com/products/extjs/themes/">Ext Themes</a>, or, your own custom themes.</span></h1>
+ </div>
+
+ </body>
</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff