docs: function (out) {
              var cfg = this._cfg, orientation = this._orientation, cfgH, cfgW, cfgHclass, cfgWclass;
              var size = this._calculateSize(cfg), size1 = size.size1, size2 = size.size2, splitterBarPos;
              var panelBorder = orientation ? this._panelBorderH : this._panelBorderV;
              if (size1 === 0) {
                  splitterBarPos = 0;
                  size2 += panelBorder;
              } else {
                  if (size2 === 0) {
                      size1 += panelBorder;
                  }
                  splitterBarPos = size1 + panelBorder;
              }
  
              this.setProperty("size1", size1);
              this.setProperty("size2", size2);
              var borderClass = "";
              var sclass = cfg.sclass;
              var height = cfg.height - this._containerBorderH, width = cfg.width - this._containerBorderV;
  
              if (cfg.border) {
                  borderClass = "xSplitter_" + sclass + "_sBdr";
              }
              this._handleBarClass = "xSplitter_" + sclass + (orientation ? "_sHandleH" : "_sHandleV");
  
              if (orientation) {
                  cfgH = height, cfgW = width, cfgWclass = width - this._panelBorderV, cfgHclass = size1;
              } else {
                  cfgH = height, cfgHclass = height - this._panelBorderH, cfgW = width, cfgWclass = size1;
              }
  
              out.write(['<span class="xSplitter_', sclass, '_sContainer ', borderClass, '" style="height:', cfgH,
                      'px;width:', cfgW, 'px;"><span class="xSplitter_', sclass,
                      '_sConstrained"  ><span class="xSplitter_', sclass, '_sMacro" style="height: ', cfgHclass,
                      'px; width:', cfgWclass, 'px;">'].join(""));
              out.beginSection({
                  id : "_splitterContent1_" + this._domId,
                  macro : cfg.macro1
              });
              out.endSection();
              out.write('</span> ');
  
              var sDimension, sPosition, sEndPosition, splitterBarSize;
              if (orientation) {
                  cfgHclass = size2, cfgWclass = width - this._panelBorderV, sDimension = "width", splitterBarSize = width
                          - this._separatorBorderV, sPosition = "top", sEndPosition = "bottom";
              } else {
                  cfgHclass = height - this._panelBorderH, cfgWclass = size2, sDimension = "height", splitterBarSize = height
                          - this._separatorBorderH, sPosition = "left", sEndPosition = "right";
              }
  
              out.write(['<span class="', this._handleBarClass, '" style="' + sDimension + ':', splitterBarSize,
                      'px;' + sPosition + ':', splitterBarPos, 'px; "> </span><span id="splitBarProxy_', this._domId,
                      '" class="', this._handleBarClass, ' " style="' + sPosition + ':', splitterBarPos,
                      'px; ' + sDimension + ':' + splitterBarSize + 'px;"></span><span class="xSplitter_', sclass,
                      '_sMacro" style="height: ', cfgHclass, 'px;width:', cfgWclass, 'px;' + sEndPosition + ':0px">'].join(""));
  
              out.beginSection({
                  id : "_splitterContent2_" + this._domId,
                  macro : cfg.macro2
              });
              out.endSection();
              out.write(['</span> </span> </span>'].join(""));
  
          }