projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * This example shows basic drag and drop node moving in a tree. In this implementation\r | |
| 3 | * there are no restrictions and anything can be dropped anywhere except appending to nodes\r | |
| 4 | * marked "leaf" (the files).\r | |
| 5 | *\r | |
| 6 | * In order to demonstrate drag and drop insertion points, sorting is not enabled.\r | |
| 7 | *\r | |
| 8 | * The data for this tree is asynchronously loaded through a TreeStore and AjaxProxy.\r | |
| 9 | */\r | |
| 10 | Ext.define('KitchenSink.view.tree.Reorder', {\r | |
| 11 | extend: 'Ext.tree.Panel',\r | |
| 12 | \r | |
| 13 | requires: [\r | |
| 14 | 'Ext.tree.*',\r | |
| 15 | 'Ext.data.*'\r | |
| 16 | ],\r | |
| 17 | xtype: 'tree-reorder',\r | |
| 18 | \r | |
| 19 | //<example>\r | |
| 20 | exampleTitle: 'Drag and Drop ordering in a TreePanel',\r | |
| 21 | //</example>\r | |
| 22 | \r | |
| 23 | height: 400,\r | |
| 24 | width: 350,\r | |
| 25 | title: 'Files',\r | |
| 26 | useArrows: true,\r | |
| 27 | \r | |
| 28 | initComponent: function() {\r | |
| 29 | Ext.apply(this, {\r | |
| 30 | store: new Ext.data.TreeStore({\r | |
| 31 | proxy: {\r | |
| 32 | type: 'ajax',\r | |
| 33 | url: '/tree/get-nodes.php'\r | |
| 34 | },\r | |
| 35 | root: {\r | |
| 36 | text: 'Ext JS',\r | |
| 37 | id: 'src',\r | |
| 38 | expanded: true\r | |
| 39 | },\r | |
| 40 | folderSort: true,\r | |
| 41 | sorters: [{\r | |
| 42 | property: 'text',\r | |
| 43 | direction: 'ASC'\r | |
| 44 | }]\r | |
| 45 | }),\r | |
| 46 | viewConfig: {\r | |
| 47 | plugins: {\r | |
| 48 | ptype: 'treeviewdragdrop',\r | |
| 49 | containerScroll: true\r | |
| 50 | }\r | |
| 51 | },\r | |
| 52 | tbar: [{\r | |
| 53 | text: 'Expand All',\r | |
| 54 | scope: this,\r | |
| 55 | handler: this.onExpandAllClick\r | |
| 56 | }, {\r | |
| 57 | text: 'Collapse All',\r | |
| 58 | scope: this,\r | |
| 59 | handler: this.onCollapseAllClick\r | |
| 60 | }]\r | |
| 61 | });\r | |
| 62 | this.callParent();\r | |
| 63 | },\r | |
| 64 | \r | |
| 65 | onExpandAllClick: function(){\r | |
| 66 | var me = this,\r | |
| 67 | toolbar = me.down('toolbar');\r | |
| 68 | \r | |
| 69 | me.getEl().mask('Expanding tree...');\r | |
| 70 | toolbar.disable();\r | |
| 71 | \r | |
| 72 | this.expandAll(function() {\r | |
| 73 | me.getEl().unmask();\r | |
| 74 | toolbar.enable();\r | |
| 75 | });\r | |
| 76 | },\r | |
| 77 | \r | |
| 78 | onCollapseAllClick: function(){\r | |
| 79 | var toolbar = this.down('toolbar');\r | |
| 80 | \r | |
| 81 | toolbar.disable();\r | |
| 82 | this.collapseAll(function() {\r | |
| 83 | toolbar.enable();\r | |
| 84 | });\r | |
| 85 | }\r | |
| 86 | });\r |