]>
git.datanom.net - omvzfs.git/blob - gui/js/omv/module/admin/storage/zfs/TreePanel.js
2 * This file is part of OpenMediaVault.
4 * @license http://www.gnu.org/licenses/gpl.html GPL Version 3
5 * @author Volker Theile <volker.theile@openmediavault.org>
6 * @copyright Copyright (c) 2009-2014 Volker Theile
8 * OpenMediaVault is free software: you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation, either version 3 of the License, or
13 * OpenMediaVault is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 * GNU General Public License for more details.
18 * You should have received a copy of the GNU General Public License
19 * along with OpenMediaVault. If not, see <http://www.gnu.org/licenses/>.
21 // require("js/omv/tree/Panel.js")
22 // require("js/omv/grid/Panel.js")
23 // require("js/omv/grid/column/BinaryUnit.js")
24 // require("js/omv/grid/column/BooleanIcon.js")
25 // require("js/omv/grid/column/BooleanText.js")
26 // require("js/omv/grid/column/Empty.js")
27 // require("js/omv/grid/column/Hyperlink.js")
28 // require("js/omv/grid/column/UnixTimestamp.js")
29 // require("js/omv/grid/column/WhiteSpace.js")
30 // require("js/omv/window/MessageBox.js")
34 * @class OMV.workspace.grid.Panel
35 * @derived OMV.grid.Panel
36 * An enhanced grid panel. This grid provides 'Add', 'Edit' and 'Delete'
37 * buttons in the toolbar by default. The basic delete functionality is also
38 * implemented, simply overwrite the 'doDeletion' and 'afterDeletion'
39 * functions to implement fit your requirements. To implement the 'Add' and
40 * 'Edit' functionality overwrite the 'onAdd' and 'onEdit' callback
41 * functions. A paging toolbar which is displayed at the bottom of the grid
42 * can be displayed also. It is also possible to reload the grid
43 * automatically in a given interval.
44 * @param hideTopToolbar TRUE to hide the whole toolbar. Defaults to FALSE.
45 * @param hidePagingToolbar TRUE to hide the paging toolbar at the bottom of
46 * the grid. Defaults to TRUE.
47 * @param hideAddButton Hide the 'Add' button in the top toolbar.
49 * @param hideEditButton Hide the 'Edit' button in the top toolbar.
51 * @param hideDeleteButton Hide the 'Delete' button in the top toolbar.
53 * @param hideUpButton Hide the 'Up' button in the top toolbar.
55 * @param hideDownButton Hide the 'Down' button in the top toolbar.
57 * @param hideApplyButton Hide the 'Apply' button in the top toolbar.
59 * @param hideRefreshButton Hide the 'Refresh' button in the top toolbar.
61 * @param addButtonText The button text. Defaults to 'Add'.
62 * @param editButtonText The button text. Defaults to 'Edit'.
63 * @param deleteButtonText The button text. Defaults to 'Delete'.
64 * @param upButtonText The button text. Defaults to 'Up'.
65 * @param downButtonText The button text. Defaults to 'Down'.
66 * @param applyButtonText The button text. Defaults to 'Save'.
67 * @param refreshButtonText The button text. Defaults to 'Refresh'.
68 * @param deletionConfirmRequired Set to TRUE to force the user to confirm
69 * the deletion request. Defaults to TRUE.
70 * @param deletionWaitMsg The message displayed during the deletion process.
71 * @param mode The mode how to retrieve the data displayed in the grid panel.
72 * This can be 'local' or 'remote' which means the data is requested via
73 * RPC. Defaults to 'remote'.
74 * @param rememberSelected TRUE to reselect the previous selected rows
75 * after the grid content has been reloaded/refreshed. Defaults to FALSE.
77 Ext
.define("OMV.module.admin.storage.zfs.TreePanel", {
78 extend
: "OMV.tree.Panel",
80 "OMV.window.MessageBox",
81 "OMV.grid.column.BinaryUnit",
82 "OMV.grid.column.BooleanIcon",
83 "OMV.grid.column.BooleanText",
84 "OMV.grid.column.Empty",
85 "OMV.grid.column.Hyperlink",
86 "OMV.grid.column.UnixTimestamp",
87 "OMV.grid.column.WhiteSpace"
98 hideTopToolbar
: false,
99 hidePagingToolbar
: true,
100 hideAddButton
: false,
101 hideAddObjButton
: true,
102 hideEditButton
: true,
103 hideDeleteButton
: true,
105 hideDownButton
: true,
106 hideApplyButton
: true,
107 hideRefreshButton
: true,
108 addButtonText
: _("Add Pool"),
109 addObjButtonText
: _("Add Object"),
110 editButtonText
: _("Edit"),
111 deleteButtonText
: _("Delete"),
112 upButtonText
: _("Up"),
113 downButtonText
: _("Down"),
114 applyButtonText
: _("Save"),
115 refreshButtonText
: _("Refresh"),
116 deletionConfirmRequired
: true,
117 deletionWaitMsg
: _("Deleting selected item(s)"),
119 rememberSelected
: false,
121 initComponent: function() {
123 // Initialize toolbars.
125 if(!me
.hideTopToolbar
) {
126 me
.dockedItems
.push(me
.topToolbar
= Ext
.widget({
129 items
: me
.getTopToolbarItems(me
)
132 if(!me
.hidePagingToolbar
) {
133 me
.dockedItems
.push({
136 items
: [ me
.pagingToolbar
= Ext
.widget({
137 xtype
: "pagingtoolbar",
140 displayMsg
: _("Displaying items {0} - {1} of {2}"),
141 emptyMsg
: _("No items to display")
145 me
.callParent(arguments
);
146 // Register event handler.
147 // Process double clicks in grid.
148 me
.on("itemdblclick", me
.onItemDblClick
, me
);
149 // Process selections in grid, e.g. to update the toolbar.
150 var selModel
= me
.getSelectionModel();
151 selModel
.on("selectionchange", me
.onSelectionChange
, me
);
152 // Remember selection to restore it after the grid has been
154 if(me
.rememberSelected
) {
155 me
.getStore().on("beforeload", function() {
156 if(!me
.rendered
|| Ext
.isEmpty(me
.getEl()))
158 if(!selModel
.hasSelection())
160 me
.previousSelected
= selModel
.getSelection();
162 me
.getView().on("refresh", function(view
) {
163 if(Ext
.isEmpty(me
.previousSelected
))
166 Ext
.Array
.each(me
.previousSelected
, function(r
) {
167 var record
= me
.getStore().getById(r
.getId());
168 if(!Ext
.isEmpty(record
))
171 delete me
.previousSelected
;
172 if(select
.length
> 0) {
173 selModel
.select(select
, false, false);
174 selModel
.view
.focusNode(select
[0]);
181 * Returns the items displayed in the top toolbar.
182 * @param c This component object.
183 * @return An array of buttons displayed in the top toolbar.
185 getTopToolbarItems: function(c
) {
188 id
: me
.getId() + "-add",
190 text
: me
.addButtonText
,
191 icon
: "images/add.png",
192 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
193 hidden
: me
.hideAddButton
,
194 handler
: Ext
.Function
.bind(me
.onAddButton
, me
, [ me
]),
197 id
: me
.getId() + "-edit",
199 text
: me
.editButtonText
,
200 icon
: "images/edit.png",
201 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
202 hidden
: me
.hideEditButton
,
203 handler
: Ext
.Function
.bind(me
.onEditButton
, me
, [ me
]),
207 id
: me
.getId() + "-addobj",
209 text
: me
.addObjButtonText
,
210 icon
: "images/add.png",
211 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
212 hidden
: me
.hideAddObjButton
,
213 handler
: Ext
.Function
.bind(me
.onAddObjButton
, me
, [ me
]),
217 id
: me
.getId() + "-delete",
219 text
: me
.deleteButtonText
,
220 icon
: "images/delete.png",
221 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
222 hidden
: me
.hideDeleteButton
,
223 handler
: Ext
.Function
.bind(me
.onDeleteButton
, me
, [ me
]),
227 id
: me
.getId() + "-up",
229 text
: me
.upButtonText
,
230 icon
: "images/arrow-up.png",
231 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
232 hidden
: me
.hideUpButton
,
233 handler
: Ext
.Function
.bind(me
.onUpButton
, me
, [ me
]),
237 id
: me
.getId() + "-down",
239 text
: me
.downButtonText
,
240 icon
: "images/arrow-down.png",
241 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
242 hidden
: me
.hideDownButton
,
243 handler
: Ext
.Function
.bind(me
.onDownButton
, me
, [ me
]),
247 id
: me
.getId() + "-apply",
249 text
: me
.applyButtonText
,
250 icon
: "images/checkmark.png",
251 hidden
: me
.hideApplyButton
,
252 handler
: Ext
.Function
.bind(me
.onApplyButton
, me
, [ me
]),
255 id
: me
.getId() + "-refresh",
257 text
: me
.refreshButtonText
,
258 icon
: "images/refresh.png",
259 iconCls
: Ext
.baseCSSPrefix
+ "btn-icon-16x16",
260 hidden
: me
.hideRefreshButton
,
261 handler
: Ext
.Function
.bind(me
.onRefreshButton
, me
, [ me
]),
267 * Handler that is called whenever the selection in the grid has
268 * been changed. The top toolbar buttons will be enabled/disabled
269 * depending on how much rows has been selected.
270 * @param model The selection model
272 onSelectionChange: function(model
, records
) {
274 if(me
.hideTopToolbar
)
276 var tbarBtnName
= [ "addobj", "edit", "delete", "up", "down" ];
277 var tbarBtnDisabled
= {
284 var tbarBtnHidden
= {
291 // Enable/disable buttons depending on the number of selected rows.
292 if(records
.length
<= 0) {
293 tbarBtnDisabled
["addobj"] = true;
294 tbarBtnDisabled
["edit"] = true;
295 tbarBtnDisabled
["delete"] = true;
296 tbarBtnDisabled
["up"] = true;
297 tbarBtnDisabled
["down"] = true;
298 tbarBtnHidden
["addobj"] = true;
299 tbarBtnHidden
["edit"] = true;
300 tbarBtnHidden
["delete"] = true;
301 } else if(records
.length
== 1) {
302 tbarBtnDisabled
["addobj"] = false;
303 tbarBtnDisabled
["edit"] = false;
304 tbarBtnDisabled
["delete"] = false;
305 tbarBtnDisabled
["up"] = false;
306 tbarBtnDisabled
["down"] = false;
307 tbarBtnHidden
["addobj"] = false;
308 tbarBtnHidden
["edit"] = false;
309 tbarBtnHidden
["delete"] = false;
311 tbarBtnDisabled
["addobj"] = true;
312 tbarBtnDisabled
["edit"] = true;
313 tbarBtnDisabled
["delete"] = false;
314 tbarBtnDisabled
["up"] = false;
315 tbarBtnDisabled
["down"] = false;
316 tbarBtnHidden
["addobj"] = true;
317 tbarBtnHidden
["edit"] = true;
318 tbarBtnHidden
["delete"] = false;
320 //Disable 'AddObj' button if selected row is a Snapshot
321 Ext
.Array
.each(records
, function(record
) {
322 if("Snapshot" == record
.get("type")) {
323 tbarBtnDisabled
["addobj"] = true;
324 tbarBtnHidden
["addobj"] = true;
329 // Disable 'Delete' button if a selected node is not a leaf
330 Ext
.Array
.each(records
, function(record
) {
331 if((false == record
.get("leaf"))) {
332 tbarBtnDisabled
["delete"] = true;
333 tbarBtnHidden
["delete"] = true;
338 // Update the button controls.
339 Ext
.Array
.each(tbarBtnName
, function(name
) {
340 var tbarBtnCtrl
= me
.queryById(me
.getId() + "-" + name
);
341 if(!Ext
.isEmpty(tbarBtnCtrl
)) {
342 if(true == tbarBtnDisabled
[name
]) {
343 tbarBtnCtrl
.disable();
345 tbarBtnCtrl
.enable();
347 if(true == tbarBtnHidden
[name
]) {
356 onItemDblClick: function() {
358 if(!me
.hideTopToolbar
&& !me
.hideEditButton
) {
364 * Load the grid content.
368 if(me
.mode
=== "remote") {
374 * Reload the grid content.
376 doReload: function() {
378 if(me
.mode
=== "remote") {
384 * Handler that is called when the 'Add' button in the top toolbar
385 * is pressed. Override this method to customize the default behaviour.
386 * @param this The grid itself.
388 onAddButton: function() {
389 // Nothing to do here
393 * * Handler that is called when the 'AddObj' button in the top toolbar
394 * is pressed. Override this method to customize the default behaviour.
395 * @param this The grid itself.
397 onAddObjButton: function() {
398 // Nothing to do here
403 * Handler that is called when the 'Edit' button in the top toolbar
404 * is pressed. Override this method to customize the default behaviour.
405 * @param this The grid itself.
407 onEditButton: function() {
408 // Nothing to do here
412 * Handler that is called when the 'Up' button in the top toolbar
413 * is pressed. Override this method to customize the default behaviour.
414 * @param this The grid itself.
416 onUpButton: function() {
418 var sm
= me
.getSelectionModel();
419 var records
= sm
.getSelection();
420 if(records
.length
> 0) {
421 // Find the smallest index of the selected rows.
422 var ltIndex
= me
.store
.indexOf(records
[0]);
423 Ext
.Array
.each(records
, function(record
) {
424 var index
= me
.store
.indexOf(record
);
428 // Calculate the index where to insert the rows.
429 var index
= ltIndex
- 1;
432 me
.doMoveRows(records
, index
);
437 * Handler that is called when the 'Down' button in the top toolbar
439 * @param this The grid itself.
441 onDownButton: function() {
443 var sm
= me
.getSelectionModel();
444 var records
= sm
.getSelection();
445 if(records
.length
> 0) {
446 // Find the smallest index of the selected rows.
447 var ltIndex
= me
.store
.indexOf(records
[0]);
448 Ext
.Array
.each(records
, function(record
) {
449 var index
= me
.store
.indexOf(record
);
453 // Calculate the index where to insert the rows.
454 var index
= ltIndex
+ records
.length
;
455 var count
= me
.store
.getCount() - 1;
458 me
.doMoveRows(records
, index
);
463 * Handler that is called when the 'Apply' button in the top toolbar
464 * is pressed. Override this method to customize the default behaviour.
465 * @param this The grid itself.
467 onApplyButton: function() {
468 // Nothing to do here
472 * Handler that is called when the 'Refresh' button in the top toolbar
473 * is pressed. Override this method to customize the default behaviour.
474 * @param this The grid itself.
476 onRefreshButton: function() {
481 * Move the given rows to the given index.
482 * @param records The records to move.
483 * @param index The index where to insert the rows to be moved.
485 doMoveRows: function(records
, index
) {
487 if(!Ext
.isNumber(index
))
489 records
= Ext
.Array
.from(records
);
490 me
.store
.suspendEvents();
491 Ext
.Array
.each(records
, function(record
) {
492 me
.store
.remove(record
);
493 me
.store
.insert(index
, record
);
495 me
.store
.resumeEvents();
496 me
.afterMoveRows(records
, index
);
497 me
.getView().refresh();
501 * Function that is called after the selected rows have been moved.
502 * Override this method to customize the default behaviour.
503 * @param records The records that have been move.
504 * @param index The index where the rows have been inserted.
506 afterMoveRows: function(records
, index
) {
507 var sm
= this.getSelectionModel();
512 * Handler that is called when the 'Delete' button in the top toolbar
515 onDeleteButton: function() {
517 var sm
= me
.getSelectionModel();
518 var records
= sm
.getSelection();
519 if(me
.deletionConfirmRequired
=== true) {
520 var msg
= _("Do you really want to delete the selected item(s)?");
521 OMV
.MessageBox
.show({
522 title
: _("Confirmation"),
524 buttons
: Ext
.Msg
.YESNO
,
525 fn: function(answer
) {
528 me
.startDeletion(records
);
531 icon
: Ext
.Msg
.QUESTION
534 me
.startDeletion(records
);
540 * Private method that is called when the deletion of the selected records
542 * @param records The records to delete.
544 startDeletion: function(records
) {
546 if(records
.length
<= 0)
548 // Store selected records in a local variable
551 count
: records
.length
553 // Get first record to be deleted
554 var record
= me
.delActionInfo
.records
.pop();
555 // Display progress dialog
556 OMV
.MessageBox
.progress("", me
.deletionWaitMsg
, "");
557 me
.updateDeletionProgress();
558 // Execute deletion function
559 me
.doDeletion(record
);
563 * The method that is called to delete a selected record. Override this
564 * method to customize the default behaviour. This is necessary in
567 doDeletion: function(record
) {
569 if(me
.mode
=== "local") {
570 // Remove record from store
571 me
.store
.remove(record
);
572 // Continue deletion process
573 me
.onDeletion(null, true, null);
578 * The method that is called by the 'doDeletion' method. The progress
579 * bar will be updated and the deletion progress will be continued if
580 * there are still records to delete.
582 onDeletion: function(id
, success
, response
) {
585 // Remove temporary local variables
586 delete me
.delActionInfo
;
587 // Hide progress dialog
588 OMV
.MessageBox
.hide();
589 // Display error message
590 OMV
.MessageBox
.error(null, response
);
592 if(me
.delActionInfo
.records
.length
> 0) {
593 var record
= me
.delActionInfo
.records
.pop();
594 // Update progress dialog
595 me
.updateDeletionProgress();
596 // Execute deletion function
597 me
.doDeletion(record
);
599 // Remove temporary local variables
600 delete me
.delActionInfo
;
601 // Update and hide progress dialog
602 OMV
.MessageBox
.updateProgress(1, _("100% completed ..."));
603 OMV
.MessageBox
.hide();
610 * Function that is called after the deletion has been successful finished.
612 afterDeletion: function() {
614 if(me
.mode
=== "remote") {
621 * Private helper function to update the progress dialog.
623 updateDeletionProgress: function() {
625 // Calculate percentage
626 var p
= (me
.delActionInfo
.count
- me
.delActionInfo
.records
.length
) /
627 me
.delActionInfo
.count
;
628 // Create message text
629 var text
= Math
.round(100 * p
) + _("% completed ...");
630 // Update progress dialog
631 OMV
.MessageBox
.updateProgress(p
, text
);
635 * Convenience function for setting the given toolbar button
637 * @param name The name of the toolbar button.
638 * @param disabled TRUE to disable the button, FALSE to enable.
639 * @return The button component, otherwise FALSE.
641 setToolbarButtonDisabled: function(name
, disabled
) {
644 var btnCtrl
= me
.queryById(me
.getId() + "-" + name
);
645 if(!Ext
.isEmpty(btnCtrl
) && btnCtrl
.isButton
)
646 result
= btnCtrl
.setDisabled(disabled
);
651 * Helper function to get the top toolbar object.
652 * @return The paging toolbar object or NULL.
654 getTopToolbar: function() {
655 return this.topToolbar
;
659 * Helper function to get the paging toolbar object.
660 * @return The paging toolbar object or NULL.
662 getPagingToolbar: function() {
663 return this.pagingToolbar
;
This page took 0.199925 seconds and 6 git commands to generate.