File Manager consists of several Webix views.
The main layout includes two rows: the row with a toolbar and the row with a sublayout that contains Tree and mode views. Thus, the structure of File Manager is:
The layout of File Manager is rather flexible. It means that you can customize it according to your preferences.
For example, if you want to swap toolbars or even to remove a toolbar, the functionality of File Manager will remain untouched.
You can find more information about customizing File Manager views in the article File Manager General How-Tos.
Toolbar is based on the Webix Toolbar view.
{
id: "toolbar",
css: "webix_fmanager_toolbar",
paddingX: 10,
paddingY: 5,
margin: 7,
cols:[
// buttons
]
}
You can use the $$("toolbar") method to refer to its object:
var toolbar = $$("fmanager").$$("toolbar");
The Menu button is based on the Webix Button control. It is used to activate the Actions menu.
{
id: "menu",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_menu",
label: "<div class='webix_fmanager_bar_icon'></div>",
width: 37,
tooltip: webix.i18n.filemanager.actions
}
You can get the reference to its object in the following way:
var menu = $$("fmanager").$$("menu");
The spacer is used to separate buttons.
{
id: "menuSpacer",
width: 75
}
To refer to its object, use the $$("menuSpacer") method:
var spacer = $$("fmanager").$$("menuSpacer");
The Back and Forward buttons are based on Webix Button. They let the user move back and forward through the navigation history.
//the Back button
{
id: "back",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_back",
label: "<div class='webix_fmanager_bar_icon'></div>",
width: 37,
tooltip: webix.i18n.filemanager.back
}
//the Forward button
{
id: "forward",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_forward",
label: "<div class='webix_fmanager_bar_icon'></div>",
width: 37,
tooltip: webix.i18n.filemanager.forward
}
To refer to the object of the buttons, use the $$("back") and $$("forward") methods, respectively:
//for the Back button
var bback = $$("fmanager").$$("back");
//for the Forward button
var bforward = $$("fmanager").$$("forward");
The Level Up button is based on Webix Button. It selects the parent folder of the selected item (file/folder):
{
id: "up",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_up",
label: "<div class=\"webix_fmanager_bar_icon \"></div>",
width: 37,
tooltip: webix.i18n.filemanager.levelUp
}
You can get the reference to its object in the following way:
var levelUp = $$("fmanager").$$("up");
The Path view displays the path to the currently selected item (file/folder).
{
id: "path"
view: "path",
borderless: true
}
To refer to its object use the $$("path") method:
var path = $$("fmanager").$$("path");
The Search element is based on the Webix Search control and allows searching for files and folders, the names of which contain the entered letter combinations:
{
id: "search",
view: "search",
gravity: 0.3,
minWidth: 80,
css: "webix_fmanager_search",
icon: "webix_fmanager_icon"
}
You can use the $$("search") method to refer to its object:
var search = $$("fmanager").$$("search");
The Modes button is based on the Webix Segmented Button control. It lets the user switch between two modes of displaying folders and files: "Files" and "Table".
{
id: "modes",
view: "segmented",
width: 70,
value: settings.mode,
css: "webix_fmanager_modes",
options: [
// options
]
}
The options are specified as an array:
[
{
id: "files",
width: 32,
value: "<div class='webix_fmanager_bar_icon webix_fmanager_files_mode'></div>"
},
{
id: "table",
width: 32,
value: "<div class='webix_fmanager_bar_icon webix_fmanager_table_mode'></div>"
}
]
To refer to its object, use the $$("modes") method:
var modes = $$("fmanager").$$("modes");
bodyLayout includes 3 columns: a layout with Tree, a Resizer view and a column with "Files" and "Tree" view modes.
treeLayout includes a treeToolbar and Tree.
treeToolbar includes 4 elements: the hideTree button, the spacer, the expandAll and collapseAll buttons:
The hideTree button hides/shows the Tree panel.
{
id: "hideTree",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_toggle",
label: "<div class=\"webix_fmanager_bar_icon\"></div>",
width: 30,
tooltip: webix.i18n.filemanager.hideTree
}
The expandAll button expands the collapsed Tree.
{
id: "expandAll",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_expand",
label: "<div class='webix_fmanager_bar_icon'></div>",
width: 30,
tooltip: webix.i18n.filemanager.expandTree
}
The collapseAll button collapses the Tree leaving only the root folder visible.
{
id: "collapseAll",
view: "button",
type: "htmlbutton",
css: "webix_fmanager_collapse",
label: "<div class='webix_fmanager_bar_icon'></div>",
width: 30,
tooltip: webix.i18n.filemanager.collapseTree
}
The Tree is based on Webix Tree. It displays the hierarchy of folders and allows navigating through them.
{
id: "tree",
width: 230,
view: "filetree",
select: true,
filterMode:{
showSubItems:false,
openParents:false
},
type: "FileTree",
// mouse navigation
navigation: true,
scroll: true,
// editing options
editor:"text",
editable: true,
// disable editing on double-click
editaction: false,
// drag-n-drop
drag: true,
// tab 'key' navigation
tabFocus: true,
// context menu
onContext:{}
}
Tree uses "FileTree" data type that configures folder icons for nodes:
webix.type(webix.ui.tree,{
name: "FileTree",
folder: function(obj, common){
if (obj.icon)
return "<div class='webix_tree_folder'></div>";
if (obj.$count && obj.open)
return "<div class='webix_tree_folder_open'></div>";
return "<div class='webix_tree_folder'></div>";
}
});
You can get the reference to tree object in the following way:
var tree = $$("fmanager").$$("tree");
Resizer is a draggable border between the Tree and the File views. It is based on Webix Resizer.
{
view:"resizer",
width:2
}
These are 2 modes of viewing files of the selected folder: "Files" and "Table". By default, the "Table" mode is active.
Files mode
"Files" mode is based on Webix DataView.
{
id: "files",
view: "fileview",
type: "FileView",
select: "multiselect",
// editing options
editable:true,
editor:"text",
editValue:"value",
// disable editing on double-click
editaction: false,
// drag-n-drop
drag: true,
// mouse navigation
navigation: true,
// tab 'key' navigation
tabFocus: true,
// context menu
onContext:{}
}
"Table" mode is based on Webix DataTable component.
{
id: "table",
view: "filetable",
css: "webix_fmanager_list",
columns: "columns",
// editing options
editable: true,
// disable editing on double-click
editaction: false,
select: "multiselect",
// drag-n-drop
drag: true,
// mouse navigation
navigation: true,
resizeColumn:true,
// tab 'key' navigation
tabFocus: true,
// context menu
onContext:{}
}
The Actions menu displays actions that can be applied to selected files or folders. It appears by clicking the Menu button or by clicking the right mouse button:
The Actions menu is based on Webix ContextMenu. That's why you can operate its items via TreeStore API.
To refer to the Actions menu, you can apply the getMenu method to File Manager:
var actions = $$("fmanager").getMenu();
By default, the Actions menu contains the following data array:
[
{
id: "copy",
method: "markCopy",
icon: "fm-copy",
batch:"item",
value: webix.i18n.filemanager.copy // "Copy"
},
{
id: "cut",
method: "markCut",
icon: "fm-cut",
batch:"item",
value: webix.i18n.filemanager.cut // "Cut"
},
{
id: "paste",
method: "pasteFile",
icon: "fm-paste",
value: webix.i18n.filemanager.paste // "Paste"
},
{ $template:"Separator" },
{
id: "create",
method: "createFolder",
icon: "fm-folder",
value: webix.i18n.filemanager.create // "Create Folder"
},
{
id: "remove",
method: "deleteFile",
icon: "fm-delete",
batch:"item",
value: webix.i18n.filemanager.remove // "Delete"
},
{
id: "edit",
method: "editFile",
icon: "fm-edit",
batch:"item",
value: webix.i18n.filemanager.rename // "Rename"
},
{
id: "upload",
method: "uploadFile",
event:"UploadDialog",
icon: "fm-upload",
value: webix.i18n.filemanager.upload // "Upload"
}
]
The properties of actions are the following:
You can reload data using the following approach:
var actions = $$("fmanager").getMenu();
actions.clearAll();
var newData = [{id: "copy", ...},...];
actions.parse(newData);
The add method allows adding a new action to menu:
actions.add({id: "myAction", icon: "fm-file", value: "My Action"});
For instance, you can add the initial "download" option when Filemanager is ready:
view:"filemanager",
ready:function(){
this.getMenu().add({
id: "download",
icon: "webix_icon wxi-download",
value: "Download",
batch: "file"
}, 0);
}
Related sample: Custom menu buttons
On clicking any menu item, Filemanager method defined by action.method
or action.id
is called.
In the above snippet, Filemanager download is called. If no method in Filemanager matches the ID or the method of your custom item, you will need to add it to the component prototype.
Setting a click handler for the new action
You can set a click handler for the added action using onItemClick event handler:
actions.attachEvent("onItemClick", function(id){
if(id == "myAction"){
// some code here
}
});
To remove an action, call the remove method:
actions.remove("upload");
It is possible to customize the Actions menu with the help of the menuFilter function that can filter menu items before showing a menu on the page.
view:"filemanager",
id: "fmanager",
menuFilter:function(obj){
//obj - menu item obj
var context = $$("fmanager").getMenu().getContext();
//dataId - id of the clicked data item
var dataId = context.id;
if(..some condition ..)
return false;
return true;
}
The function should return true to show the item, false to hide it.
Back to top