如何创建对接面板 [英] How to create a Docking Panel

问题描述

如何创建停靠面板?我正在使用示例 https://developer中的代码.autodesk.com/zh-CN/docs/viewer/v2/reference/javascript/dockingpanel/ 应该继承并覆盖所需的方法.

How to create a docking panel? I am using the code from the example https://developer.autodesk.com/en/docs/viewer/v2/reference/javascript/dockingpanel/ that should inherit and override needed methods.

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
  Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

  // Auto-fit to the content and don't allow resize.  Position at the coordinates given.
  //
  this.container.style.height = "auto";
  this.container.style.width = "auto";
  this.container.style.resize = "none";
  this.container.style.left = x + "px";
  this.container.style.top = y + "px";
};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{
  // Override DockingPanel initialize() to:
  // - create a standard title bar
  // - click anywhere on the panel to move
  // - create a close element at the bottom right
  //
  this.title = this.createTitleBar(this.titleLabel || this.container.id);
  this.container.appendChild(this.title);

  this.container.appendChild(this.content);
  this.initializeMoveHandlers(this.container);

  this.closer = document.createElement("div");
  this.closer.className = "simplePanelClose";
  this.closer.textContent = "Close";
  this.initializeCloseHandler(this.closer);
  this.container.appendChild(this.closer);
};

此后，我用以下命令调用创建的简单面板:

After this I am calling the created simple panel with:

var parent = document.getElementsByClassName('adsk-viewing-viewer')[0];
var panel = SimplePanel(parent, 'panel1', 'panel1');

返回错误: 未捕获的TypeError:DockingPanel上的this.setVisible不是函数(viewer3D.js?v = 2.11:34343)"

It is returning error: "Uncaught TypeError: this.setVisible is not a function at DockingPanel (viewer3D.js?v=2.11:34343)"

它似乎来自

Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

到

var DockingPanel = function (parentContainer, id, title, options) {

然后崩溃.

在查看器停靠面板功能内部，"this"似乎是指window元素.也许应该是别的东西吗?例如，当查看器创建搜索窗口时，它似乎是指某个div.

Inside the viewer docking panel function "this" seems to be referring to the window element. Maybe it should be something else? When the viewer is creating the search window for example it seems to be referring to some div.

推荐答案

我没有收到像您这样的错误，但我遇到了另一个由空内容引起的问题.因此，我明确创建了一个div作为要作为参数的内容.另外，宽度&高度也是必需的，否则面板将不会显示.

I did not get such error like yours, but I hit another issue that is caused by empty content. So I explicitly created a div as the content to be the argument. In addition, width & height are also required, otherwise the panel will not show up.

Panel类如下.

The Panel class is as below.

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});

// Auto-fit to the content and don't allow resize.  Position at the coordinates given.
//
this.container.style.height = "150px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px"; 

};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{ 
        this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);

this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);

this.closer = this.createCloseButton();
this.title.appendChild(this.closer);


var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);

var html = [
    '<div class="uicomponent-panel-controls-container">',
    '<div class="panel panel-default">',
    '<table class="table table-hover table-responsive" id = "clashresultstable">',
    '<thead>',
    '<th>Name</th><th>Status</th><th>Found</th><th>Approved By</th><th>Description</th>',
    '</thead>',
    '<tbody>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
    '</tbody>',
    '</table>',
    '</div>',
    '</div>'
].join('\n');


$(this.scrollContainer).append(html);

this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);        
};

我在控制台脚本上加载了此面板.

I loaded this panel on console script.

 var content = document.createElement('div');
     var mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);
     mypanel.setVisible(true);

如果问题仍然存在，请提供一个小的示例文件.我可以站在一边做测试.

If you still have the issue, please provide a small sample file. I can give a test at my side.

这篇关于如何创建对接面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！