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