add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / desktop / app / Settings.js

/*!\r
 * Ext JS Library\r
 * Copyright(c) 2006-2014 Sencha Inc.\r
 * licensing@sencha.com\r
 * http://www.sencha.com/license\r
 */\r
\r
Ext.define('Desktop.Settings', {\r
    extend: 'Ext.window.Window',\r
\r
    uses: [\r
        'Ext.tree.Panel',\r
        'Ext.tree.View',\r
        'Ext.form.field.Checkbox',\r
        'Ext.layout.container.Anchor',\r
        'Ext.layout.container.Border',\r
\r
        'Ext.ux.desktop.Wallpaper',\r
\r
        'Desktop.model.Wallpaper'\r
    ],\r
\r
    layout: 'anchor',\r
    title: 'Change Settings',\r
    modal: true,\r
    width: 640,\r
    height: 480,\r
    border: false,\r
\r
    initComponent: function () {\r
        var me = this;\r
\r
        me.selected = me.desktop.getWallpaper();\r
        me.stretch = me.desktop.wallpaper.stretch;\r
\r
        me.preview = Ext.create('widget.wallpaper');\r
        me.preview.setWallpaper(me.selected);\r
        me.tree = me.createTree();\r
\r
        me.buttons = [\r
            { text: 'OK', handler: me.onOK, scope: me },\r
            { text: 'Cancel', handler: me.close, scope: me }\r
        ];\r
\r
        me.items = [\r
            {\r
                anchor: '0 -30',\r
                border: false,\r
                layout: 'border',\r
                items: [\r
                    me.tree,\r
                    {\r
                        xtype: 'panel',\r
                        title: 'Preview',\r
                        region: 'center',\r
                        layout: 'fit',\r
                        items: [ me.preview ]\r
                    }\r
                ]\r
            },\r
            {\r
                xtype: 'checkbox',\r
                boxLabel: 'Stretch to fit',\r
                checked: me.stretch,\r
                listeners: {\r
                    change: function (comp) {\r
                        me.stretch = comp.checked;\r
                    }\r
                }\r
            }\r
        ];\r
\r
        me.callParent();\r
    },\r
\r
    createTree : function() {\r
        var me = this;\r
\r
        function child (img) {\r
            return { img: img, text: me.getTextOfWallpaper(img), iconCls: '', leaf: true };\r
        }\r
\r
        var tree = new Ext.tree.Panel({\r
            title: 'Desktop Background',\r
            rootVisible: false,\r
            lines: false,\r
            scrollable: true,\r
            width: 150,\r
            region: 'west',\r
            split: true,\r
            minWidth: 100,\r
            listeners: {\r
                afterrender: { fn: this.setInitialSelection, delay: 100 },\r
                select: this.onSelect,\r
                scope: this\r
            },\r
            store: new Ext.data.TreeStore({\r
                model: 'Desktop.model.Wallpaper',\r
                root: {\r
                    text:'Wallpaper',\r
                    expanded: true,\r
                    children:[\r
                        { text: "None", iconCls: '', leaf: true },\r
                        child('Blue-Sencha.jpg'),\r
                        child('Dark-Sencha.jpg'),\r
                        child('Wood-Sencha.jpg'),\r
                        child('blue.jpg'),\r
                        child('desk.jpg'),\r
                        child('desktop.jpg'),\r
                        child('desktop2.jpg'),\r
                        child('sky.jpg')\r
                    ]\r
                }\r
            })\r
        });\r
\r
        return tree;\r
    },\r
\r
    getTextOfWallpaper: function (path) {\r
        var text = path, slash = path.lastIndexOf('/');\r
        if (slash >= 0) {\r
            text = text.substring(slash+1);\r
        }\r
        var dot = text.lastIndexOf('.');\r
        text = Ext.String.capitalize(text.substring(0, dot));\r
        text = text.replace(/[-]/g, ' ');\r
        return text;\r
    },\r
\r
    onOK: function () {\r
        var me = this;\r
        if (me.selected) {\r
            me.desktop.setWallpaper(me.selected, me.stretch);\r
        }\r
        me.destroy();\r
    },\r
\r
    onSelect: function (tree, record) {\r
        var me = this;\r
\r
        if (record.data.img) {\r
            me.selected = 'resources/images/wallpapers/' + record.data.img;\r
        } else {\r
            me.selected = Ext.BLANK_IMAGE_URL;\r
        }\r
\r
        me.preview.setWallpaper(me.selected);\r
    },\r
\r
    setInitialSelection: function () {\r
        var s = this.desktop.getWallpaper();\r
        if (s) {\r
            var path = '/Wallpaper/' + this.getTextOfWallpaper(s);\r
            this.tree.selectPath(path, 'text');\r
        }\r
    }\r
});\r