AlbumTree.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. title: 'My Albums',
  13. animate: true,
  14. rootVisible: false,
  15. viewConfig: {
  16. plugins: [{
  17. ddGroup: 'organizerDD',
  18. ptype : 'treeviewdragdrop'
  19. }]
  20. },
  21. displayField: 'name',
  22. initComponent: function() {
  23. this.count = 1;
  24. this.tbar = [
  25. {
  26. text: 'New Album',
  27. iconCls: 'album-btn',
  28. scope: this,
  29. handler: this.addAlbum
  30. }
  31. ];
  32. this.store = Ext.create('Ext.data.TreeStore', {
  33. fields: ['name'],
  34. root: {
  35. name: 'Root',
  36. allowDrop: false,
  37. expanded: true,
  38. children: [
  39. {
  40. name : 'Album 1',
  41. iconCls: 'album-btn',
  42. children: []
  43. }
  44. ]
  45. }
  46. });
  47. this.callParent();
  48. },
  49. /**
  50. * Adds a new album node to the root
  51. */
  52. addAlbum: function() {
  53. var root = this.store.getRootNode();
  54. this.count++;
  55. root.appendChild({
  56. name: 'Album ' + this.count,
  57. iconCls: 'album-btn',
  58. children: []
  59. });
  60. }
  61. });