add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / shared / options-toolbar.js

(function() {\r
    function getQueryParam(name, queryString) {\r
        var match = RegExp(name + '=([^&]*)').exec(queryString || location.search);\r
        return match && decodeURIComponent(match[1]);\r
    }\r
\r
    function hasOption(opt) {\r
        var s = window.location.search;\r
        var re = new RegExp('(?:^|[&?])' + opt + '(?:[=]([^&]*))?(?:$|[&])', 'i');\r
        var m = re.exec(s);\r
\r
        return m ? (m[1] === undefined ? true : m[1]) : false;\r
    }\r
\r
    var scriptTags = document.getElementsByTagName('script'),\r
        defaultTheme = 'triton',\r
        defaultRtl = false,\r
        i = scriptTags.length,\r
        requires = [\r
            'Ext.window.MessageBox',\r
            'Ext.toolbar.Toolbar',\r
            'Ext.form.field.ComboBox',\r
            'Ext.form.FieldContainer',\r
            'Ext.form.field.Radio'\r
\r
        ],\r
        comboWidth = {\r
            classic: 160,\r
            gray: 160,\r
            neptune: 180,\r
            triton: 180,\r
            crisp: 180,\r
            'neptune-touch': 220,\r
            'crisp-touch': 220\r
        },\r
        labelWidth = {\r
            classic: 40,\r
            gray: 40,\r
            neptune: 45,\r
            triton: 45,\r
            crisp: 45,\r
            'neptune-touch': 55,\r
            'crisp-touch': 55\r
        },\r
        defaultQueryString, src, theme, rtl, toolbar;\r
\r
    while (i--) {\r
        src = scriptTags[i].src;\r
        if (src.indexOf('include-ext.js') !== -1) {\r
            defaultQueryString = src.split('?')[1];\r
            if (defaultQueryString) {\r
                defaultTheme = getQueryParam('theme', defaultQueryString) || defaultTheme;\r
                defaultRtl = getQueryParam('rtl', defaultQueryString) || defaultRtl;\r
            }\r
            break;\r
        }\r
    }\r
\r
    Ext.themeName = theme = getQueryParam('theme') || defaultTheme;\r
    \r
    rtl = getQueryParam('rtl') || defaultRtl;\r
\r
    if (rtl.toString() === 'true') {\r
        requires.unshift('Ext.rtl.*');\r
        Ext.define('Ext.examples.RtlComponent', {\r
            override: 'Ext.Component',\r
            rtl: true\r
        });\r
    }\r
\r
    Ext.require(requires);\r
\r
    Ext.onReady(function() {\r
        Ext.getBody().addCls(Ext.baseCSSPrefix + 'theme-' + Ext.themeName);\r
\r
        // prevent touchmove from panning the viewport in mobile safari\r
        if (Ext.supports.TouchEvents) {\r
            Ext.getDoc().on({\r
                touchmove: function(e) {\r
                    // If within a scroller, don't let the document use it\r
                    if (Ext.scroll.Scroller.isTouching) {\r
                        e.preventDefault();\r
                    }\r
                },\r
                translate: false,\r
                delegated: false\r
            });\r
        }\r
\r
        if (hasOption('nocss3')) {\r
            Ext.supports.CSS3BorderRadius = false;\r
            Ext.getBody().addCls('x-nbr x-nlg');\r
        }\r
\r
        if (hasOption('nlg')) {\r
            Ext.getBody().addCls('x-nlg');\r
        }\r
\r
        function setParam(param) {\r
            var queryString = Ext.Object.toQueryString(\r
                Ext.apply(Ext.Object.fromQueryString(location.search), param)\r
            );\r
            location.search = queryString;\r
        }\r
\r
        function removeParam(paramName) {\r
            var params = Ext.Object.fromQueryString(location.search);\r
\r
            delete params[paramName];\r
\r
            location.search = Ext.Object.toQueryString(params);\r
        }\r
        \r
        if (hasOption('no-toolbar') || /no-toolbar/.test(document.cookie)) {\r
            return;\r
        }\r
\r
        if (hasOption('no-toolbar') || /no-toolbar/.test(document.cookie)) {\r
            return;\r
        }\r
\r
        setTimeout(function() {\r
            toolbar = Ext.widget({\r
                xtype: 'toolbar',\r
                border: true,\r
                rtl: false,\r
                id: 'options-toolbar',\r
                floating: true,\r
                fixed: true,\r
                preventFocusOnActivate: true,\r
                draggable: {\r
                    constrain: true\r
                },\r
                defaults : { rtl : false },\r
                items: [{\r
                    xtype: 'combo',\r
                    width: comboWidth[Ext.themeName],\r
                    labelWidth: labelWidth[Ext.themeName],\r
                    fieldLabel: 'Theme',\r
                    displayField: 'name',\r
                    valueField: 'value',\r
                    labelStyle: 'cursor:move;',\r
                    margin: '0 5 0 0',\r
                    queryMode: 'local',\r
                    store: Ext.create('Ext.data.Store', {\r
                        fields: ['value', 'name'],\r
                        data : [\r
                            { value: 'triton', name: 'Triton' },\r
                            { value: 'neptune', name: 'Neptune' },\r
                            { value: 'neptune-touch', name: 'Neptune Touch' },\r
                            { value: 'crisp', name: 'Crisp' },\r
                            { value: 'crisp-touch', name: 'Crisp Touch' },\r
                            { value: 'classic', name: 'Classic' },\r
                            { value: 'gray', name: 'Gray' }\r
                        ]\r
                    }),\r
                    value: theme,\r
                    listeners: {\r
                        select: function(combo) {\r
                            var theme = combo.getValue();\r
                            if (theme !== defaultTheme) {\r
                                setParam({ theme: theme });\r
                            } else {\r
                                removeParam('theme');\r
                            }\r
                        }\r
                    }\r
                }, {\r
\r
                    /**\r
                     * Only visible in repoDevMode and on QA sites\r
                     */\r
                    xtype: 'button',\r
                    hidden: !(Ext.repoDevMode || location.href.indexOf('qa.sencha.com') !== -1),\r
                    enableToggle: true,\r
                    pressed: rtl,\r
                    text: 'RTL',\r
                    margin: '0 5 0 0',\r
                    listeners: {\r
                        toggle: function(btn, pressed) {\r
                            if (pressed) {\r
                                setParam({ rtl: true });\r
                            } else {\r
                                removeParam('rtl');\r
                            }\r
                        }\r
                    }\r
                }, {\r
                    xtype: 'tool',\r
                    type: 'close',\r
                    handler: function() {\r
                        toolbar.destroy();\r
                    }\r
                }],\r
\r
                // Extra constraint margins within default constrain region of parentNode\r
                constraintInsets: '0 -' + (Ext.getScrollbarSize().width + 5) + ' 0 0'\r
            });\r
            toolbar.show();\r
            toolbar.anchorTo(\r
                document.body,\r
                Ext.optionsToolbarAlign || 'tr-tr',\r
                [-(Ext.getScrollbarSize().width + 5), 0],  //adjust for scrollbar offsets\r
                false,                                     //anim\r
                true                                       //monitor scroll\r
            );\r
\r
        }, 100);\r
\r
    });\r
})();\r