对接面板可调整大小和滚动容器(Docking Panel resizable and scroll container)

对接面板可调整大小和滚动容器(Docking Panel resizable and scroll container)

如何调整停靠面板的大小？ 如何在Docking Panel中创建滚动容器？

我已经使用本答案中给出的简单面板扩展了对接面板如何创建对接面板 。 如此理想将会知道如何制作它们

SimplePanel.prototype.initialize = function()

或创建对接面板时的某个位置。

How can Docking Panel be made resizable? How to create scroll container in Docking Panel?

I have extended Docking Panel with the Simple Panel given in this answer How to create a Docking Panel. So ideal would be know how to make them in

SimplePanel.prototype.initialize = function()

or somewhere when creating the docking panel.

最满意答案

我更喜欢扩展机制，这样你就可以定义自包含它的JavaScript文件。 这是一个例子。 现在是style.resize =“auto”代码行以及如何使用其他元素appendChild （例如，一个充满其他元素的DIV）。 使用此扩展，您只需要调用viewer.loadExtension（） 。

AutodeskNamespace('Autodesk.ADN.Viewing.Extension'); Autodesk.ADN.Viewing.Extension.MyExtension = function (viewer, options) { Autodesk.Viewing.Extension.call(this, viewer, options); var _self = this; /////////////////////////////////////////////////////////////////////////// // load callback /////////////////////////////////////////////////////////////////////////// _self.load = function () { // need to access geometry? wait until is loaded viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { createDockPanel(); }); return true; }; var _dockPanel; function createDockPanel() { _dockPanel = new Autodesk.Viewing.UI.DockingPanel(viewer.container, 'ecom', 'Cart'); _dockPanel.container.style.top = "10px"; _dockPanel.container.style.left = "10px"; _dockPanel.container.style.width = "auto"; _dockPanel.container.style.height = "auto"; _dockPanel.container.style.resize = "auto"; _dockPanel.container.appendChild(document.getElementById(‘someOtherElement’)); // for instance, a DIV _dockPanel.setVisible(true); } /////////////////////////////////////////////////////////////////////////// // unload callback /////////////////////////////////////////////////////////////////////////// _self.unload = function () { _dockPanel.setVisible(false) return true; }; }; Autodesk.ADN.Viewing.Extension.MyExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype); Autodesk.ADN.Viewing.Extension.MyExtension.prototype.constructor = Autodesk.ADN.Viewing.Extension.MyExtension; Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.Viewing.Extension.MyExtension', Autodesk.ADN.Viewing.Extension.MyExtension);

I prefer the Extension mechanism, that way you can define JavaScript file that self-contain it. Here is an example. Now the style.resize="auto" line of code and how you can appendChild with other elements (e.g. a DIV full of other elements). With this extension you just need to call viewer.loadExtension().

AutodeskNamespace('Autodesk.ADN.Viewing.Extension'); Autodesk.ADN.Viewing.Extension.MyExtension = function (viewer, options) { Autodesk.Viewing.Extension.call(this, viewer, options); var _self = this; /////////////////////////////////////////////////////////////////////////// // load callback /////////////////////////////////////////////////////////////////////////// _self.load = function () { // need to access geometry? wait until is loaded viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () { createDockPanel(); }); return true; }; var _dockPanel; function createDockPanel() { _dockPanel = new Autodesk.Viewing.UI.DockingPanel(viewer.container, 'ecom', 'Cart'); _dockPanel.container.style.top = "10px"; _dockPanel.container.style.left = "10px"; _dockPanel.container.style.width = "auto"; _dockPanel.container.style.height = "auto"; _dockPanel.container.style.resize = "auto"; _dockPanel.container.appendChild(document.getElementById(‘someOtherElement’)); // for instance, a DIV _dockPanel.setVisible(true); } /////////////////////////////////////////////////////////////////////////// // unload callback /////////////////////////////////////////////////////////////////////////// _self.unload = function () { _dockPanel.setVisible(false) return true; }; }; Autodesk.ADN.Viewing.Extension.MyExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype); Autodesk.ADN.Viewing.Extension.MyExtension.prototype.constructor = Autodesk.ADN.Viewing.Extension.MyExtension; Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.Viewing.Extension.MyExtension', Autodesk.ADN.Viewing.Extension.MyExtension);