如何创建停靠面板

Question

如何创建对接面板？我正在使用示例 https://developer.autodesk.com/en/docs/viewer/v2/reference/javascript/dockingpanel/ 中的代码应该继承和覆盖所需的方法。

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);
};

在此之后，我调用创建的简单面板：

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

返回错误： "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 元素。也许它应该是别的东西？例如，当查看者创建搜索 window 时，它似乎指的是某些 div.

Answer 1

我没有遇到像你这样的错误，但我遇到了另一个由空内容引起的问题。所以我明确地创建了一个 div 作为参数的内容。另外，width & height 也是必须的，否则面板显示不出来。

面板class如下。

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);        
};

我在控制台脚本上加载了这个面板。

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

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

如何创建停靠面板

How to create a Docking Panel

autodesk-viewer

autodesk-forge