examples/desktop/Settings.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /*!
  16  * Ext JS Library 4.0
  17  * Copyright(c) 2006-2011 Sencha Inc.
  18  * licensing@sencha.com
  19  * http://www.sencha.com/license
  20  */
  21
  22 Ext.define('MyDesktop.Settings', {
  23     extend: 'Ext.window.Window',
  24
  25     uses: [
  26         'Ext.tree.Panel',
  27         'Ext.tree.View',
  28         'Ext.form.field.Checkbox',
  29         'Ext.layout.container.Anchor',
  30         'Ext.layout.container.Border',
  31
  32         'Ext.ux.desktop.Wallpaper',
  33
  34         'MyDesktop.WallpaperModel'
  35     ],
  36
  37     layout: 'anchor',
  38     title: 'Change Settings',
  39     modal: true,
  40     width: 640,
  41     height: 480,
  42     border: false,
  43
  44     initComponent: function () {
  45         var me = this;
  46
  47         me.selected = me.desktop.getWallpaper();
  48         me.stretch = me.desktop.wallpaper.stretch;
  49
  50         me.preview = Ext.create('widget.wallpaper');
  51         me.preview.setWallpaper(me.selected);
  52         me.tree = me.createTree();
  53
  54         me.buttons = [
  55             { text: 'OK', handler: me.onOK, scope: me },
  56             { text: 'Cancel', handler: me.close, scope: me }
  57         ];
  58
  59         me.items = [
  60             {
  61                 anchor: '0 -30',
  62                 border: false,
  63                 layout: 'border',
  64                 items: [
  65                     me.tree,
  66                     {
  67                         xtype: 'panel',
  68                         title: 'Preview',
  69                         region: 'center',
  70                         layout: 'fit',
  71                         items: [ me.preview ]
  72                     }
  73                 ]
  74             },
  75             {
  76                 xtype: 'checkbox',
  77                 boxLabel: 'Stretch to fit',
  78                 checked: me.stretch,
  79                 listeners: {
  80                     change: function (comp) {
  81                         me.stretch = comp.checked;
  82                     }
  83                 }
  84             }
  85         ];
  86
  87         me.callParent();
  88     },
  89
  90     createTree : function() {
  91         var me = this;
  92
  93         function child (img) {
  94             return { img: img, text: me.getTextOfWallpaper(img), iconCls: '', leaf: true };
  95         }
  96
  97         var tree = new Ext.tree.Panel({
  98             title: 'Desktop Background',
  99             rootVisible: false,
 100             lines: false,
 101             autoScroll: true,
 102             width: 150,
 103             region: 'west',
 104             split: true,
 105             minWidth: 100,
 106             listeners: {
 107                 afterrender: { fn: this.setInitialSelection, delay: 100 },
 108                 select: this.onSelect,
 109                 scope: this
 110             },
 111             store: new Ext.data.TreeStore({
 112                 model: 'MyDesktop.WallpaperModel',
 113                 root: {
 114                     text:'Wallpaper',
 115                     expanded: true,
 116                     children:[
 117                         { text: "None", iconCls: '', leaf: true },
 118                         child('Blue-Sencha.jpg'),
 119                         child('Dark-Sencha.jpg'),
 120                         child('Wood-Sencha.jpg'),
 121                         child('blue.jpg'),
 122                         child('desk.jpg'),
 123                         child('desktop.jpg'),
 124                         child('desktop2.jpg'),
 125                         child('sky.jpg')
 126                     ]
 127                 }
 128             })
 129         });
 130
 131         return tree;
 132     },
 133
 134     getTextOfWallpaper: function (path) {
 135         var text = path, slash = path.lastIndexOf('/');
 136         if (slash >= 0) {
 137             text = text.substring(slash+1);
 138         }
 139         var dot = text.lastIndexOf('.');
 140         text = Ext.String.capitalize(text.substring(0, dot));
 141         text = text.replace(/[-]/g, ' ');
 142         return text;
 143     },
 144
 145     onOK: function () {
 146         var me = this;
 147         if (me.selected) {
 148             me.desktop.setWallpaper(me.selected, me.stretch);
 149         }
 150         me.destroy();
 151     },
 152
 153     onSelect: function (tree, record) {
 154         var me = this;
 155
 156         if (record.data.img) {
 157             me.selected = 'wallpapers/' + record.data.img;
 158         } else {
 159             me.selected = Ext.BLANK_IMAGE_URL;
 160         }
 161
 162         me.preview.setWallpaper(me.selected);
 163     },
 164
 165     setInitialSelection: function () {
 166         var s = this.desktop.getWallpaper();
 167         if (s) {
 168             var path = '/Wallpaper/' + this.getTextOfWallpaper(s);
 169             this.tree.selectPath(path, 'text');
 170         }
 171     }
 172 });
 173