gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,284 lines (370 loc) • 170 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® Panel Class</title>
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/highlight.js"></script>
<script src="../../assets/js/api.js"></script>
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
<!-- custom CSS after bootstrap -->
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../doc/download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Diagram Classes</span>
</div>
</div>
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Geometry Classes</span>
</div>
</div>
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Model Classes</span>
</div>
</div>
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Layout Classes</span>
</div>
</div>
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Tool Classes</span>
</div>
</div>
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
</ul>
</div>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<span class="navbar-brand">Collection Classes</span>
</div>
</div>
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="classList nav navbar-nav">
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
</ul>
</div>
</div>
</div> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</div>
<div id="contentBody" class="col-md-10">
<!-- ============================== header ================================= -->
<div id="header" class="fineprint mt30">
<b>GoJS</b>® Diagramming Components<br/>version 1.7.19 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle mt30">
Class Panel
</h2>
<!-- ============================== class summary ========================== -->
<span class="hideshowall">
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
<span class="details"><button id="buttonHide">Show Summaries</button></span>
</span>
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
A Panel is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements.
A Panel is responsible for sizing and positioning its elements.
The elements of a panel are drawn in the order in which they appear in the <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> collection.
<p>
The <a href="../symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="../symbols/Node.html" class="linkConstructor">Node</a> and <a href="../symbols/Link.html" class="linkConstructor">Link</a>.
<p>
Every Panel has a <a href="../symbols/Panel.html#type" class="linkProperty">type</a> and establishes its own coordinate system. The type of a Panel
determines how it will size and arrange its elements:
<ul>
<li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li>
<li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li>
<li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li>
<li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a>
and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel.
Spot panels can align relative to other elements by using <a href="../symbols/Panel.html#alignmentFocusName" class="linkProperty">Panel.alignmentFocusName</a>.</li>
<li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the different
elements' <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>,
and <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li>
<li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel
to organize a collection of elements as a row or as a column in a table.</li>
<li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li>
<li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.
The elements must be <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li>
<li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="../symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li>
<li><a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> is used to draw regular tick marks and text along the main <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> element.</li>
</ul>
Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:
<pre>// Either:
$(go.Panel, go.Panel.Horizontal, ...
// Or:
$(go.Panel, "Horizontal", ...
// Full example:
$(go.Panel, "Horizontal",
{ width: 60, height: 60 }, // panel properties
// elements in the panel:
$(go.Shape, "Rectangle", { stroke: "lime" }),
$(go.TextBlock, "Some Text")
) // end of panel definition </pre>
<p class="boxread">
For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.
<p>
<a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjects
vertically above each other or horizontally next to each other. Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or
<a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size.
Set <a href="../symbols/Panel.html#isOpposite" class="linkProperty">isOpposite</a> to true if you want the elements arranged from right-to-left in Horizontal Panels
or from bottom-to-top in Vertical Panels.
<p>
<a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first element
with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true. If there is no such element, it uses the first element as the "main" one.
Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element.
Use the <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels.
"Spot" and "Auto" Panels should have two or more elements in them.
<p>
In <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>
properties on each element. The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are also
useful when an element's table cell is larger than that element.
<p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a>
for more examples and explanation.
<p>
<a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel.
They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data
provided in an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>. You will still need to specify properties on the individual elements within a TableRow
or TableColumn as if they were immediate elements of the containing Table panel.
<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.
<p>
<a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.
<pre>$(go.Diagram, "myDiagramDiv",
{ . . .
grid: $(go.Panel, "Grid",
{ gridCellSize: new go.Size(40, 40) },
$(go.Shape, "LineH", { stroke: "lightgray" }),
$(go.Shape, "LineV", { stroke: "lightgray" })
),
. . .
});</pre>
Or to get a green bar effect:
<pre>$(go.Diagram, "myDiagramDiv",
{ . . .
grid: $(go.Panel, "Grid",
{ gridCellSize: new go.Size(100, 100) },
$(go.Shape, "BarH", { fill: "lightgreen", height: 50 })
),
. . .
});</pre>
But Grid Panels can also be stand alone objects:
<pre>$(go.Node, go.Panel.Grid,
{ gridCellSize: new go.Size(6, 6), width: 60, height: 60 },
$(go.Shape, "LineH", { stroke: "gray" }),
$(go.Shape, "LineV", { stroke: "gray" }))</pre>
<p>
A Grid Panel's elements do not participate in object picking.
<p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a>
for more examples and explanation.
<p>
<a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel
are used to define ticks and labels to draw along the main shape's path.
<pre>$(go.Part, "Graduated",
$(go.Shape, { geometryString: "M0 0 H400" }),
$(go.Shape, { geometryString: "M0 0 V10" }),
// offset to display below ticks
$(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
);</pre>
<p>
Only the main shape of a Graduated Panel participates in object picking, but a <code>background</code>
can be set if the entire panel needs to be pickable.
You cannot set or bind the <a>Panel.itemArray</a> of a Graduated Panel.
Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored.
Graduated Panel TextBlock labels cannot be edited.
<p>
Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element
won't rotate its children. Rotation should generally be done at the Panel level. Another similarity
to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.
<p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a>
for more examples and explanation.
<h3>Changing and accessing elements of a Panel</h3>
<p>
You can change the collection of <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>.
You can get direct access to a particular element by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>.
<p>
You can search the visual tree of a Panel for GraphObjects that given a <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using <a href="../symbols/Panel.html#findObject" class="linkMethod">findObject</a>.
<h3>Panel Size and Appearance</h3>
<p>
Panels typically compute their own size based on their elements and Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a>,
but can also be sized by setting <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>.
Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,
especially in the cases of nested elements having a <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap.
<p>
Panels have no visual components of their own unless a <a href="../symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specified
or separators are specified either as defaults for the whole Table Panel or on individual <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.
<p>
In addition to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels,
several Panel properties only apply to specific Panel types.
<ul>
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>, <a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a>, <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>,
<a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a>, <a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a>, <a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a>, and all of the "default" separator properties.</li>
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects,
instead they are only to be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers
that hold elements for their parent table, and ignore their own scale and angle.</li>
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">gridCellSize</a> and <a href="../symbols/Panel.html#gridOrigin" class="linkProperty">gridOrigin</a> properties.</li>
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">viewboxStretch</a> property.</li>
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> use the <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a>, <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a>,
<a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">graduatedTickUnit</a>, and <a href="../symbols/Panel.html#graduatedTickBase" class="linkProperty">graduatedTickBase</a> properties.
</ul>
<p class="boxread">
For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a>
<h3>Data Binding</h3>
<p>
Panels also provide fundamental support for data binding.
When a diagram gets a new model or when a diagram's model is augmented with additional data,
the diagram automatically creates a new Node or Link whose <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property refers to the corresponding
node data or link data object.
<p class="boxread">
For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>
and <a href="../../intro/dataBinding.html">Data Binding</a>.
<p>
Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.
This is achieved by setting or binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, which acts in a manner similar
to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property.
You can supply an <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a>, which must itself be a simple Panel, which is copied to create the element
in this container Panel corresponding to an item in the itemArray.
This property is analogous to the <a href="../symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram the
template must be a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
<p>
Much like the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> supports having multiple templates,
so that the actual structure of the element created for a data item can be chosen dynamically.
Just as the <a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>
is copied to create a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, the <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> names the data property whose value
chooses the Panel in the itemTemplateMap to copy for the item.
<p>
When binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and
<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and its
contents are copied, not shared. Or more generally, to customize the model's copying processes, you
can supply a custom <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>.
<p class="boxread">
For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Panel.">
<thead>
<tr>
<th scope="col" class="name">Name</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name" >
<div class="name">
Panel(type)
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>Constructs an empty Panel of the given <a href="../symbols/Panel.html#type" class="linkProperty">type</a>.<span class="nodetails" id="xconPanel"><a class="morelink" onclick="hst('conPanel')">More...</a></span> <span class="details" id="conPanel"> Default type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.
The panel type must be one of the enumerated values defined on the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> class, including:
<a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>, <a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a>, <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a>, <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>,
<a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a>, <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a>, or <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a>.</span>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{EnumValue=}</span> <b>type</b>
</dt>
<dd>If not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
<div class="table-responsive">
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Panel.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="alignmentFocusName" >
<td class="name">
<div class="name">
alignmentFocusName
</div>
<div class="attributes">
<span class="light">{string}</span>
<span class="since" title="since">1.7</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>For Panels which are elements of Spot Panels, this gets or sets the name
of this Panel's element that should be used as the alignment object instead of this Panel.<span class="nodetails" id="xpropalignmentFocusName"><a class="morelink" onclick="hst('propalignmentFocusName')">More...</a></span> <span class="details" id="propalignmentFocusName">
</span><div class="details" id="dpropalignmentFocusName"><p>
This allows Spot Panels to align objects that are nested in the element tree of its own elements.</div>
</div>
</td>
</tr>
<tr id="columnCount" >
<td class="name">
<div class="name">
columnCount
</div>
<div class="attributes">
<span class="light">{number}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns the number of columns in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnCount"><a class="morelink" onclick="hst('propcolumnCount')">More...</a></span> <span class="details" id="propcolumnCount">
This value is only valid after the Panel has been measured.</span>
</div>
</td>
</tr>
<tr id="columnSizing" >
<td class="name">
<div class="name">
columnSizing
</div>
<div class="attributes">
<span class="light">{EnumValue}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets how this Panel's columns deal with extra space
if the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnSizing"><a class="morelink" onclick="hst('propcolumnSizing')">More...</a></span> <span class="details" id="propcolumnSizing">
Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>.
The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li>
<li><a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="data" >
<td class="name">
<div class="name">
data
</div>
<div class="attributes">
<span class="light">{Object}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the optional model data to which this panel is data-bound.<span class="nodetails" id="xpropdata"><a class="morelink" onclick="hst('propdata')">More...</a></span> <span class="details" id="propdata">
The data must be a JavaScript Object if this is a <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
The data can be any JavaScript value if this is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> created for
an item in an Array that was data-bound by the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property.
The default value is null.
</span><div class="details" id="dpropdata"><p>
Setting it to a new value automatically calls <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">updateTargetBindings</a>
in order to assign new values to all of the data-bound GraphObject properties.
<p>
Once you set this property you cannot add, remove, or modify any data bindings
on any of the GraphObjects in the visual tree of this Panel, including on
this panel itself.
<p>
You should not modify this property on a <a href="../symbols/Part.html" class="linkConstructor">Part</a> that is created automatically
to represent model data, nor on a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that is created automatically for a data item
in the containing Panel's <a href="../symbols/P