examples/organizer/AlbumTree.js

   1 /**
   2  * @class Ext.org.AlbumTree
   3  * @extends Ext.tree.Panel
   4  * @xtype albumtree
   5  *
   6  * This class implements the "My Albums" tree. In addition, this class provides the ability
   7  * to add new albums and accept dropped items from the {@link Ext.org.ImageView}.
   8  */
   9 Ext.define('Ext.org.AlbumTree', {
  10     extend: 'Ext.tree.Panel',
  11     alias : 'widget.albumtree',
  12
  13     title: 'My Albums',
  14     animate: true,
  15     rootVisible: false,
  16
  17     viewConfig: {
  18         plugins: [{
  19             ddGroup: 'organizerDD',
  20             ptype  : 'treeviewdragdrop'
  21         }]
  22     },
  23
  24     displayField: 'name',
  25
  26     initComponent: function() {
  27         this.count = 1;
  28
  29         this.tbar = [
  30             {
  31                 text: 'New Album',
  32                 iconCls: 'album-btn',
  33                 scope: this,
  34                 handler: this.addAlbum
  35             }
  36         ];
  37
  38         this.store = Ext.create('Ext.data.TreeStore', {
  39             fields: ['name'],
  40
  41             root: {
  42                 name: 'Root',
  43                 allowDrop: false,
  44                 expanded: true,
  45                 children: [
  46                     {
  47                         name   : 'Album 1',
  48                         iconCls: 'album-btn',
  49                         children: []
  50                     }
  51                 ]
  52             }
  53         });
  54
  55         this.callParent();
  56     },
  57
  58     /**
  59      * Adds a new album node to the root
  60      */
  61     addAlbum: function() {
  62         var root = this.store.getRootNode();
  63         this.count++;
  64
  65         root.appendChild({
  66             name: 'Album ' + this.count,
  67             iconCls: 'album-btn',
  68             children: []
  69         });
  70     }
  71 });