http://forums.gleamtech.com/4444/add-a-button-in-the-toolbar-fileultimate You should first register a client loaded event: <GleamTech:FileManager ID="fileManager" runat="server" ClientLoaded="fileManagerLoaded" > ... Then in the host page you should add this javascript function: function fileManagerLoaded(sender, eventArgs) { var fileManager = sender; fileManager.ToolBar.imagesPath = "/myimages/"; fileManager.ToolBar.RenderItem(fileManager.ToolBar.AddSeparator()); fileManager.ToolBar.RenderItem(fileManager.ToolBar.AddButton("TestButtonAction", "description", "newbutton.png")); fileManager.ToolBar.onButtonClick = function (toolBarButton, e) { switch (toolBarButton.action) { case "TestButtonAction": alert("Test button clicked!"); break; default : fileManager.onAction(toolBarButton); } }; GleamTech.JavaScript.UI.ContextMenuIconsPath["custom"] = "/myimages/"; fileManager.ContextMenus.FileGridRow.InsertMenuItem(fileManager.ContextMenus.FileGridRow.menuItems["OpenWith"].index + 1, "TestMenuAction", "New menu item", "description", "custom:newmenuitem.png"); fileManager.ContextMenus.FileGridRow.onMenuItemClick = function (menuItem, e) { switch (menuItem.action) { case "TestMenuAction": var gridRow = menuItem.menu.target; var selectedItemName = gridRow.GetCellValue(fileManager.GridView.columns.Name); alert("Test menu item clicked for item: " + selectedItemName); break; default: fileManager.onAction(menuItem, menuItem.menu.target); } }; } Note that the size for toolbar images is 24x24 and for menu item images is 16x16. I also recommend you to use Firebug on Firefox to figure out the available properties of the objects found in FileManager API.
<head> <script type="text/javascript"> function fileManagerLoading(sender, e) { var fileManager = sender; fileManager.ribbon.addTab({ title: "Test tab", items: [ { title: "Test group", items:[ { text: "Test button", iconCls: "", //css class for image icon: "", //or url to the image scale: "small", //or medium or large handler: function () { var selectedItemNames = Ext.Array.map( fileManager.currentViewSelection, function (item) { return item.data.name; } ); alert( "Clicked test button!\n" + "Current selection:" + selectedItemNames ); } } ] } ] }); Ext.override(fileManager, { createViewItemContextMenu: function () { var me = this; var menu = this.callParent(); menu.add([// or menu.insert(0, [ { text: "Test menu item", handler: function () { alert( "Clicked test menu item!\n" + "Context menu record:" + me.contextMenuRecord.data.name ); } } ]); return menu; } }); fileManager.centerPane.columns.push({ text: "Test column", dataIndex: "name", tdCls: "x-item-value", renderer: function (value, meta, record) { //you can use the name value as an id to //get your own corresponding value here //e.g if you have an object customValues with file names as key //you can retreive and return customValues[record.data.name] return record.data.name; } }); } </script> </head> <body> <GleamTech:FileManager id="fileManager" runat="server" ClientLoading="fileManagerLoading" /> </body>
Fixed: ClientLoading event was being fired too late, some functions like fileManager.onViewRefresh are registered as event handlers to internal components so even you override them later the components still referred to the old function reference, so Ext.override was not working. From now on ClientLoading will now fire at the start of initComponent and ClientLoaded at the end of initComponent. ClientLoading should be used for Ext.override calls, ClientLoaded should be called for adding actions, UI elements.
<head> <script type="text/javascript"> function fileManagerLoading(sender, e) { var fileManager = sender; //Adding a context menu item Ext.override(fileManager, { createViewItemContextMenu: function () { var me = this; var menu = this.callParent(); menu.add([// or menu.insert(0, [ { text: "Test menu item", handler: function () { alert( "Clicked test menu item!\n" + "Context menu record:" + me.contextMenuRecord.data.name ); } } ]); return menu; } }); //Adding a column for "Details" view layout Ext.override(fileManager, { getViewColumnsConfig: function () { var columns = this.callParent(arguments); columns.push({ text: "Test column", dataIndex: "name", tdCls: "x-item-value", renderer: function (value, meta, record) { //you can use the name value as an id to //get your own corresponding value here //e.g if you have an object customValues //with file names as key, you can retrieve //and return customValues[record.data.name] return record.data.name; } }); return columns; } }); } function fileManagerLoaded(sender, e) { var fileManager = sender; //Adding a new ribbon tab fileManager.ribbon.addTab({ title: "Test tab", items: [ { title: "Test group", items:[ { text: "Test button", iconCls: "", //css class for image icon: "", //or url to the image scale: "small", //or medium or large handler: function () { var selectedItemNames = Ext.Array.map( fileManager.currentViewSelection, function (item) { return item.data.name; } ); alert( "Clicked test button!\n" + "Current selection:" + selectedItemNames ); } } ] } ] }); } </script> </head> <body> <GleamTech:FileManager id="fileManager" runat="server" ClientLoading="fileManagerLoading" ClientLoaded="fileManagerLoaded" /> </body>
Ext.override(fileManager, { getViewColumnsConfig: function () { var columns = this.callParent(arguments); columns.push({ text: "Test column", dataIndex: "name", tdCls: "x-item-value", renderer: function (value, meta, record) { //you can use the name value as an id to //get your own corresponding value here //e.g if you have an object customValues //with file names as key, you can retrieve //and return customValues[record.data.name] return record.data.name; } }); return columns; } }); }
Trouble logging in? Simply enter your email address OR username in order to reset your password.
For faster and more reliable delivery, add notify@gleamtech.com to your trusted senders list in your email software.