Back to Community Threads
How to Custom Menu and Custom ToolBar
Question asked by Sky.Edge - November 13, 2014 at 12:37 AM
Answered
4.1.5  Run  Wrong，help
 
 
 
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.

4 Replies

Reply to Thread
2
Cem Alacayir Replied
November 13, 2014 at 7:05 AM
Employee Post
Yes, with v4.x, client-side API is changed so you can do it like this from now on:
 
<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>
 
0
joseph Replied
November 24, 2016 at 7:23 PM
Hi is this still applicable for version 5.6? It tried this but i receive
 
Uncaught TypeError: Cannot read property 'addTab' of null
 
Please advise. Thanks
0
Cem Alacayir Replied
January 11, 2017 at 4:11 AM
Employee Post Marked As Answer
After v5.5.5 there was this change:
 
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.
So for addTab to work, you should use fileManagerLoaded event instead of fileManagerLoading event:
 
<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>
 
 
0
Cem Alacayir Replied
December 12, 2017 at 2:24 AM
Employee Post
Updated code for "Adding a column for "Details" view layout", need to override getViewColumnsConfig so that it works when the initial view layout is "Details" (with the old code, it required switching view layout once to work)
Back to Community Threads

Reply to Thread

Related Community Threads

can we customize the context menuQuestion by venkat karlapalem-May 9, 2018Compatibility with Clipboard.jsProblem reported by Alexandre Boucher-January 16, 2017Is it possible to get the file name with parent folder names for a context menu selection?Question by Alexandre Boucher-October 20, 2016Is it possible to add customize ToolBar in DocumentViewer ?Question by KyawZinOO-August 28, 2017

Related Knowledge Base Articles

Version History of FileUltimateFileUltimateVersion History of FileVistaFileVistaEULA for FileUltimateFileUltimateHow to update an existing installation of FileVista to a newer versionFileVistaUsing DocumentUltimate on AzureDocumentUltimate