extjs/examples/classic/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             displayField: 'name'
  22         }]
  23     },
  24
  25     displayField: 'name',
  26
  27     initComponent: function() {
  28         this.count = 1;
  29
  30         this.tbar = [
  31             {
  32                 text: 'New Album',
  33                 iconCls: 'album-btn',
  34                 scope: this,
  35                 handler: this.addAlbum
  36             }
  37         ];
  38
  39         this.store = Ext.create('Ext.data.TreeStore', {
  40             fields: ['name'],
  41
  42             root: {
  43                 name: 'Root',
  44                 allowDrop: false,
  45                 expanded: true,
  46                 children: [
  47                     {
  48                         name   : 'Album 1',
  49                         iconCls: 'album-btn',
  50                         children: []
  51                     }
  52                 ]
  53             }
  54         });
  55
  56         this.callParent();
  57     },
  58
  59     /**
  60      * Adds a new album node to the root
  61      */
  62     addAlbum: function() {
  63         var root = this.store.getRoot();
  64         this.count++;
  65
  66         root.appendChild({
  67             name: 'Album ' + this.count,
  68             iconCls: 'album-btn',
  69             children: []
  70         });
  71     }
  72 });