1 /*! 2 * This file is part of Aloha Editor Project http://aloha-editor.org 3 * Copyright © 2010-2011 Gentics Software GmbH, aloha@gentics.com 4 * Contributors http://aloha-editor.org/contribution.php 5 * Licensed unter the terms of http://www.aloha-editor.org/license.html 6 *//* 7 * Aloha Editor is free software: you can redistribute it and/or modify 8 * it under the terms of the GNU Affero General Public License as published by 9 * the Free Software Foundation, either version 3 of the License, or 10 * (at your option) any later version.* 11 * 12 * Aloha Editor is distributed in the hope that it will be useful, 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 15 * GNU Affero General Public License for more details. 16 * 17 * You should have received a copy of the GNU Affero General Public License 18 * along with this program. If not, see <http://www.gnu.org/licenses/>. 19 */ 20 21 define( 22 ['aloha/ext', 'aloha/ui'], 23 function(Ext, ui) { 24 "use strict"; 25 26 var 27 // $ = jQuery, 28 // GENTICS = window.GENTICS, 29 // Aloha = window.Aloha, 30 Class = window.Class; 31 32 /** 33 * !!!! ATTENTION !!!! 34 * This is work in progress. This implemenation may change heavily. 35 * Not yet implemented: 36 * - configuring and templating the list 37 * - DnD 38 * - passing all possible query attributes to the repository 39 * - query of subtree 40 * - icon representation 41 */ 42 ui.Browser = Class.extend({ 43 _constructor: function () { 44 45 /** 46 * @cfg Function called when an element is selected 47 */ 48 this.onSelect = null; 49 50 var that = this; 51 52 // define the grid that represents the filelist 53 this.grid = new Ext.grid.GridPanel( { 54 region : 'center', 55 autoScroll : true, 56 // the datastore can be used by the gridpanel to fetch data from 57 // repository manager 58 store : new Ext.data.Store( { 59 proxy : new Ext.data.AlohaProxy(), 60 reader : new Ext.data.AlohaObjectReader() 61 }), 62 columns : [ { 63 id : 'name', 64 header : 'Name', 65 width : 100, 66 sortable : true, 67 dataIndex : 'name' 68 }, { 69 header : 'URL', 70 renderer : function(val) { 71 return val; 72 }, 73 width : 300, 74 sortable : true, 75 dataIndex : 'url' 76 } ], 77 stripeRows : true, 78 autoExpandColumn : 'name', 79 height : 350, 80 width : 600, 81 title : 'Objectlist', 82 stateful : true, 83 stateId : 'grid', 84 selModel: new Ext.grid.RowSelectionModel({singleSelect:true}), 85 listeners : { 86 'dblclick' : function(e) { 87 that.onItemSelect(); 88 } 89 } 90 }); 91 this.grid.getSelectionModel().on({ 92 'selectionchange' : function(sm, n, node){ 93 var resourceItem = that.grid.getSelectionModel().getSelected(); 94 if (resourceItem) { 95 this.win.buttons[1].enable(); 96 } else { 97 this.win.buttons[1].disable(); 98 } 99 }, 100 scope:this 101 }); 102 103 104 // define the treepanel 105 this.tree = new Ext.tree.TreePanel( { 106 region : 'center', 107 useArrows : true, 108 autoScroll : true, 109 animate : true, 110 enableDD : true, 111 containerScroll : true, 112 113 border : false, 114 loader : new Ext.tree.AlohaTreeLoader(), 115 root : { 116 nodeType : 'async', 117 text : 'Aloha Repositories', 118 draggable : false, 119 id : 'aloha' 120 }, 121 rootVisible : false, 122 listeners : { 123 'beforeload' : function(node) { 124 this.loader.baseParams = { 125 node : node.attributes 126 }; 127 } 128 } 129 }); 130 this.tree.getSelectionModel().on({ 131 'selectionchange' : function(sm, node){ 132 if (node) { 133 var resourceItem = node.attributes; 134 that.grid.store.load({ params: { 135 inFolderId: resourceItem.id, 136 objectTypeFilter: that.objectTypeFilter, 137 repositoryId: resourceItem.repositoryId 138 }}); 139 } 140 }, 141 scope:this 142 }); 143 144 // nest the tree within a panel 145 this.nav = new Ext.Panel( { 146 title : 'Navigation', 147 region : 'west', 148 width : 300, 149 layout : 'fit', 150 collapsible : true, 151 items : [ this.tree ] 152 }); 153 154 // add the nested tree and grid (filelist) to the window 155 this.win = new Ext.Window( { 156 title : 'Resource Selector', 157 layout : 'border', 158 width : 800, 159 height : 300, 160 closeAction : 'hide', 161 onEsc: function () { 162 this.hide(); 163 }, 164 defaultButton: this.nav, 165 plain : true, 166 initHidden: true, 167 items : [ this.nav, this.grid ], 168 buttons : [{ 169 text : 'Close', 170 handler : function() { 171 that.win.hide(); 172 } 173 }, { 174 text : 'Select', 175 disabled : true, 176 handler : function() { 177 that.onItemSelect(); 178 } 179 }], 180 toFront : function(e) { 181 this.manager = this.manager || Ext.WindowMgr; 182 this.manager.bringToFront(this); 183 this.setZIndex(9999999999); // bring really to front (floating menu is not registered as window...) 184 return this; 185 } 186 }); 187 188 this.onItemSelect = function () { 189 var 190 sm = this.grid.getSelectionModel(), 191 sel = (sm) ? sm.getSelected() : null, 192 resourceItem = (sel) ? sel.data : null; 193 this.win.hide(); 194 if ( typeof this.onSelect === 'function' ) { 195 this.onSelect.call(this, resourceItem); 196 } 197 }; 198 }, 199 200 setObjectTypeFilter: function(otf) { 201 this.objectTypeFilter = otf; 202 }, 203 204 getObjectTypeFilter: function() { 205 return this.objectTypeFilter; 206 }, 207 208 show: function() { 209 this.win.show(); // first show, 210 this.win.toFront(true); 211 this.win.focus(); 212 } 213 }); 214 215 }); 216