examples/desktop/Settings.js

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