Docking Panel resizable and scroll container - autodesk-forge

Question

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.

Answer 1

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