Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

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