/ext-4.1.0_b3/examples/shared/include-theme.js

 1(function() {
 2    var url = getUrl(),
 3        thisDir = getDir(url),
 4        params = getMergedQueryParams(url),
 5        theme = getTheme(params),
 6        css = getCss(theme);
 7
 8    document.write(Ext.String.format('<link rel="stylesheet" type="text/css" href="{0}/../../resources/css/ext-{1}.css" />', thisDir, css));
 9
10    if (params.themes_combo != null) {
11        Ext.require('Ext.panel.Panel');
12        Ext.require('Ext.data.ArrayStore');
13        Ext.require('Ext.form.field.ComboBox');
14
15        Ext.onReady(function() {
16            Ext.create('Ext.panel.Panel', {
17                autoShow: true,
18                frame: true,
19                renderTo: Ext.getBody(),
20                items: {
21                    editable: false,
22                    fieldLabel: 'Theme',
23                    labelWidth: 50,
24                    value: theme,
25                    width: 180,
26                    xtype: 'combo',
27                    listeners: {
28                        change: function(combo, value) {
29                            params.theme = value;
30
31                            location.search = Ext.Object.toQueryString(params);
32                        }
33                    },
34                    store: [
35                        ['classic', 'Classic'],
36                        ['gray', 'Gray'],
37                        ['access', 'Accessibility']
38                    ],
39                    style: {
40                        margin: '2px'
41                    }
42                },
43                style: {
44                    position: 'absolute',
45                    right: '10px',
46                    top: '10px'
47                }
48            });
49        });
50    }
51
52    // The URL used to load this script file
53    function getUrl() {
54        var scripts = document.getElementsByTagName('script'),
55            thisScript = scripts[scripts.length - 1];
56
57        return thisScript.src;
58    }
59
60    // The directory of this script file
61    function getDir(url) {
62        return url.slice(0, url.lastIndexOf('/'));
63    }
64
65    // Combines the query parameters from the page URL and the script URL
66    function getMergedQueryParams(url) {
67        var searchIndex = url.indexOf('?'),
68            parse = Ext.Object.fromQueryString;
69
70        return Ext.apply(searchIndex === -1 ? {} : parse(url.slice(searchIndex)), parse(location.search));
71    }
72
73    // Get the canonical theme name from the query parameters
74    function getTheme(params) {
75        return {
76            access: 'access',
77            accessibility: 'access',
78            gray: 'gray',
79            grey: 'gray'
80        }[params.theme || params.css] || 'classic';
81    }
82
83    // Get the CSS file name from the theme name
84    function getCss(theme) {
85        return {
86            access: 'all-access',
87            classic: 'all',
88            gray: 'all-gray'
89        }[theme];
90    }
91})();