For future reference, here is updated example code for recent versions of FileUltimate (also added more details in comments):
In your page HTML (inside <head> tag), put this JS event handler:
<head>
<script type="text/javascript">
function fileManagerLoading(sender, e) {
var fileManager = sender;
//Creating a context menu item
Ext.override(fileManager, {
createViewItemContextMenu: function () {
var me = this;
var menu = this.callParent();
menu.add([// or menu.insert(0, [
{
text: "My menu item",
handler: function () {
var selectedItem = me.contextMenuSelection;
alert(
"Clicked my menu item! Context menu was opened for this item:\n"
+ selectedItem.data.name
);
}
}
]);
return menu;
}
});
//Adding a column for "Details" view layout
Ext.override(fileManager, {
getViewColumnsConfig: function () {
var columns = this.callParent(arguments);
columns.push({
text: "My Column",
dataIndex: "name", //the field to use for the column (there are other fields like "itemType", "extension" etc.)
width: 200,
isToolTipValue: true,
formatterFn: function (value, record) {
//the function will receive the value for chosen field ("name" in this example)
/*
you can use the name field as an id to
get your own corresponding value
e.g if you have an object customValues
with file names as key, you can retrieve
and return it here:
var customValues = {
"File1.txt": "Custom value for File1.txt",
"File2.doc": "this custom value different"
}
return customValues[record.data.name];
*/
return "Custom value for " + value;
}
});
return columns;
}
});
//Creating buttons, tabs, groups in ribbon (top toolbar)
Ext.override(fileManager, {
createRibbon: function () {
var me = this;
var ribbon = this.callParent();
//Creating a new group with a button in "Home" tab
var homeTab = ribbon.down("#homeTab");
//or find tab with index
//var homeTab = ribbon.items.getAt(0);
ribbon.insertGroup(homeTab, homeTab.items.getCount(),
{
title: "My Group",
layout: "vbox",
items: [
{
text: "My Button",
iconCls: "", //css class for image
icon: "", //or url to the image
scale: "small", //or medium or large
handler: function () {
var selectedItems = me.viewSelection;
var info = Ext.Array.map(selectedItems, function (item) { return item.data.name; });
//or use all fields not just name
//var info = Ext.Array.map(selectedItems, function (item) { return item.data; });
//Pretty print the selected items
var json = JSON.stringify(info, null, 2);
alert(
"Clicked my button! These items were selected:\n"
+ json
);
}
}
]
}
);
//Creating a new tab with new group with a button
ribbon.addTab({
title: "My Tab",
items: [
{
title: "My Group 2",
items: [
{
text: "My Button 2",
iconCls: "", //css class for image
icon: "", //or url to the image
scale: "small", //or medium or large
handler: function () {
var firstSelectedItem = me.viewSelection[0];
me.createChildWindow({
childWindowId: "MyWindow" + firstSelectedItem.data.name, //This can be used to open the existing window e.g. for same folder/item
title: "My Window for " + firstSelectedItem.data.name,
width: 800,
height: 600,
items: {
xclass: "GleamTech.UI.IFrame",
//you can put your custom page url here
//src: "/my-url-here"
//or use srcDoc to embed inline html in frame
srcDoc: "<h1>Welcome to frame content for " + firstSelectedItem.data.name + "</h1>"
}
});
}
}
]
}
]
});
return ribbon;
}
});
}
</script>
</head>
Then in your controller or in code behind, register the JS (client) event:
fileManager.ClientEvents.Loading = "fileManagerLoading";
Or in markup for ASP.NET Web Forms, you can register it like this:
<body>
<GleamTech:FileManager id="fileManager" runat="server">
<ClientEvents Loading="fileManagerLoading"
</GleamTech:FileManagerControl>
</body>
@Software Developer, see the updated code for the answer to your problem.