examples/desktop/AccordionWindow.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.AccordionWindow', {
  23     extend: 'Ext.ux.desktop.Module',
  24
  25     requires: [
  26         'Ext.data.TreeStore',
  27         'Ext.layout.container.Accordion',
  28         'Ext.toolbar.Spacer',
  29         'Ext.tree.Panel'
  30     ],
  31
  32     id:'acc-win',
  33
  34     init : function(){
  35         this.launcher = {
  36             text: 'Accordion Window',
  37             iconCls:'accordion',
  38             handler : this.createWindow,
  39             scope: this
  40         };
  41     },
  42
  43     createTree : function(){
  44         var tree = Ext.create('Ext.tree.Panel', {
  45             id:'im-tree',
  46             title: 'Online Users',
  47             rootVisible:false,
  48             lines:false,
  49             autoScroll:true,
  50             tools:[{
  51                 type: 'refresh',
  52                 handler: function(c, t) {
  53                     tree.setLoading(true, tree.body);
  54                     var root = tree.getRootNode();
  55                     root.collapseChildren(true, false);
  56                     Ext.Function.defer(function() { // mimic a server call
  57                         tree.setLoading(false);
  58                         root.expand(true, true);
  59                     }, 1000);
  60                 }
  61             }],
  62             store: Ext.create('Ext.data.TreeStore', {
  63                 root: {
  64                     text:'Online',
  65                     expanded: true,
  66                     children:[{
  67                         text:'Friends',
  68                         expanded:true,
  69                         children:[
  70                             { text:'Brian', iconCls:'user', leaf:true },
  71                             { text:'Kevin', iconCls:'user', leaf:true },
  72                             { text:'Mark', iconCls:'user', leaf:true },
  73                             { text:'Matt', iconCls:'user', leaf:true },
  74                             { text:'Michael', iconCls:'user', leaf:true },
  75                             { text:'Mike Jr', iconCls:'user', leaf:true },
  76                             { text:'Mike Sr', iconCls:'user', leaf:true },
  77                             { text:'JR', iconCls:'user', leaf:true },
  78                             { text:'Rich', iconCls:'user', leaf:true },
  79                             { text:'Nige', iconCls:'user', leaf:true },
  80                             { text:'Zac', iconCls:'user', leaf:true }
  81                         ]
  82                     },{
  83                         text:'Family',
  84                         expanded:true,
  85                         children:[
  86                             { text:'Kiana', iconCls:'user-girl', leaf:true },
  87                             { text:'Aubrey', iconCls:'user-girl', leaf:true },
  88                             { text:'Cale', iconCls:'user-kid', leaf:true }
  89                         ]
  90                     }]
  91                 }
  92             })
  93         });
  94
  95         return tree;
  96     },
  97
  98     createWindow : function(){
  99         var desktop = this.app.getDesktop();
 100         var win = desktop.getWindow('acc-win');
 101
 102         if (!win) {
 103             win = desktop.createWindow({
 104                 id: 'acc-win',
 105                 title: 'Accordion Window',
 106                 width: 250,
 107                 height: 400,
 108                 iconCls: 'accordion',
 109                 animCollapse: false,
 110                 constrainHeader: true,
 111                 bodyBorder: true,
 112                 tbar: {
 113                     xtype: 'toolbar',
 114                     ui: 'plain',
 115                     items: [{
 116                         tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
 117                         iconCls:'connect'
 118                     },
 119                     '-',
 120                     {
 121                         tooltip:'Add a new user',
 122                         iconCls:'user-add'
 123                     },
 124                     ' ',
 125                     {
 126                         tooltip:'Remove the selected user',
 127                         iconCls:'user-delete'
 128                     }]
 129                 },
 130
 131                 layout: 'accordion',
 132                 border: false,
 133
 134                 items: [
 135                     this.createTree(),
 136                     {
 137                         title: 'Settings',
 138                         html:'<p>Something useful would be in here.</p>',
 139                         autoScroll:true
 140                     },
 141                     {
 142                         title: 'Even More Stuff',
 143                         html : '<p>Something useful would be in here.</p>'
 144                     },
 145                     {
 146                         title: 'My Stuff',
 147                         html : '<p>Something useful would be in here.</p>'
 148                     }
 149                 ]
 150             });
 151         }
 152
 153         win.show();
 154         return win;
 155     }
 156 });
 157