dojox/layout/TableContainer.js

  • Provides:

    • dojox.layout.TableContainer
  • Requires:

    • dijit.layout._LayoutWidget in common in project dijit
  • dojox.layout.TableContainer

    • type
      Function
    • chains:
      • dijit.layout._LayoutWidget: (prototype)
      • dijit.layout._LayoutWidget: (call)
    • summary
      A container that lays out its child widgets in a table layout.
    • description
      The TableContainer lays out child widgets in a Table layout.
      Each widget can specify a "label" or a "title" parameter.
      This label is displayed either above or to the left of
      a widget depending on whether the "orientation" attribute
      is "horiz" or "vert", for horizontal and vertical respectively.
      The number of columns is configured using the "cols" attribute.
      The width of labels can be configured using the "labelWidth" parameter.
    • example
      
      	<div dojoType="dojox.layout.TableContainer" orientation="vert" cols="3>
      		<div dojoType="dijit.form.TextInput" value="John" label="First Name:"></div>
      		<div dojoType="dijit.form.CheckBox" label="Is Student?:"></div>
      		<div dojoType="dojox.form.DateTextBox" label="Date Of Birth:"></div>
      	</div>
  • dojox.layout.TableContainer.cols

    • summary
  • dojox.layout.TableContainer.labelWidth

    • type
      Number|String
    • summary
      Defines the width of a label.  If the value is a number, it is
      treated as a pixel value.  The other valid value is a percentage,
      e.g. &quot;50%&quot;
  • dojox.layout.TableContainer.showLabels

    • type
      Boolean
    • summary
      True if labels should be displayed, false otherwise.
  • dojox.layout.TableContainer.orientation

    • type
      String
    • summary
      Either &quot;horiz&quot; or &quot;vert&quot; for label orientation.
  • dojox.layout.TableContainer.spacing

    • type
      Number
    • summary
      The cell spacing to apply to the table.
  • dojox.layout.TableContainer.customClass

    • type
      String
    • summary
      A CSS class that will be applied to child elements.  For example, if
      the class is &quot;myClass&quot;, the table will have &quot;myClass-table&quot; applied to it,
      each label TD will have &quot;myClass-labelCell&quot; applied, and each
      widget TD will have &quot;myClass-valueCell&quot; applied.
  • dojox.layout.TableContainer.postCreate

    • type
      Function
    • source: [view]
        this.inherited(arguments);
        this._children = [];

        
        // If the orientation, customClass or cols attributes are changed,
        // layout the widgets again.
        this.connect(this, "set", function(name, value){
         if(value && (name == "orientation" || name == "customClass" || name == "cols")) {
          this.layout();
         }
        })
    • summary
  • dojox.layout.TableContainer.startup

    • type
      Function
    • source: [view]
        if(this._started) {
         return;
        }
        this.inherited(arguments);
        if(this._initialized) {
         return;
        }
        var children = this.getChildren();
        if(children.length < 1) {
         return;
        }
        this._initialized = true;


        dojo.addClass(this.domNode, "dijitTableLayout");


        // Call startup on all child widgets
        dojo.forEach(children, function(child){
         if(!child.started && !child._started) {
          child.startup();
         }
        });
        this.resize();
        this.layout();
    • summary
  • dojox.layout.TableContainer.resize

    • type
      Function
    • source: [view]
        dojo.forEach(this.getChildren(), function(child){
         if(typeof child.resize == "function") {
          child.resize();
         }
        });
    • summary
      Resizes all children.  This widget itself
      does not resize, as it takes up 100% of the
      available width.
  • dojox.layout.TableContainer.layout

    • type
      Function
    • source: [view]
        if(!this._initialized){
         return;
        }


        var children = this.getChildren();


        var childIds = {};
        var _this = this;


        function addCustomClass(node, type, count) {
         if(_this.customClass != "") {
          var clazz = _this.customClass+ "-" + (type || node.tagName.toLowerCase());
          dojo.addClass(node, clazz);


          if(arguments.length > 2) {
           dojo.addClass(node, clazz + "-" + count);
          }
         }
        }


        // Find any new children that have been added since the last layout() call
        dojo.forEach(this._children, dojo.hitch(this, function(child){
         childIds[child.id] = child;
        }));


        dojo.forEach(children, dojo.hitch(this, function(child, index){
         if(!childIds[child.id]) {
          // Add pre-existing children to the start of the array
          this._children.push(child);
         }
        }));


        // Create the table. It fills the width of it's container.
        var table = dojo.create("table", {
         "width": "100%",
          "class": "tableContainer-table tableContainer-table-" + this.orientation,
          "cellspacing" : this.spacing
         },
         this.domNode);


        var tbody = dojo.create("tbody");
        table.appendChild(tbody);


        addCustomClass(table, "table", this.orientation);


        var width = Math.floor(100 / this.cols) + "%";


        var labelRow = dojo.create("tr", {}, tbody);
        var childRow = (!this.showLabels || this.orientation == "horiz")
                 ? labelRow : dojo.create("tr", {}, tbody);
        var maxCols = this.cols * (this.showLabels ? 2 : 1);
        var numCols = 0;


        // Iterate over the children, adding them to the table.
        dojo.forEach(this._children, dojo.hitch(this, function(child, index){

         
         var colspan = child.colspan || 1;

         
         if(colspan > 1) {
          colspan = this.showLabels ?
           Math.min(maxCols - 1, colspan * 2 -1): Math.min(maxCols, colspan);
         }


         // Create a new row if we need one
         if(numCols + colspan - 1 + (this.showLabels ? 1 : 0)>= maxCols) {
          numCols = 0;
          labelRow = dojo.create("tr", {}, tbody);
          childRow = this.orientation == "horiz" ? labelRow : dojo.create("tr", {}, tbody);
         }
         var labelCell;

         
         // If labels should be visible, add them
         if(this.showLabels) {
          labelCell = dojo.create("td", {"class": "tableContainer-labelCell"}, labelRow);


          // If the widget should take up both the label and value,
          // then just set the class on it.
          if(child.spanLabel) {
           dojo.attr(labelCell, this.orientation == "vert" ? "rowspan" : "colspan", 2);
          }
          else {
           // Add the custom label class to the label cell
           addCustomClass(labelCell, "labelCell");
           var labelProps = {"for": child.get("id")};
           var label = dojo.create("label", labelProps, labelCell);


           if(Number(this.labelWidth) > -1 ||
            String(this.labelWidth).indexOf("%") > -1) {

             
            // Set the width of the label cell with either a pixel or percentage value
            dojo.style(labelCell, "width",
             String(this.labelWidth).indexOf("%") < 0
              ? this.labelWidth + "px" : this.labelWidth);
           }


           label.innerHTML = child.get("label") || child.get("title");
          }
         }
         var childCell;


         if(child.spanLabel && labelCell) {
          childCell = labelCell;
         } else {
           childCell = dojo.create("td", {
            "class" : "tableContainer-valueCell"
          }, childRow);
         }
         if(colspan > 1) {
          dojo.attr(childCell, "colspan", colspan);
         }

         
         // Add the widget cell's custom class, if one exists.
         addCustomClass(childCell, "valueCell", index);


         childCell.appendChild(child.domNode);
         numCols += colspan + (this.showLabels ? 1 : 0);
        }));


        if(this.table)  {
         this.table.parentNode.removeChild(this.table);
        }
        // Refresh the layout of any child widgets, allowing them to resize
        // to their new parent.
        dojo.forEach(children, function(child){
         if(typeof child.layout == "function") {
          child.layout();
         }
        });
        this.table = table;
        this.resize();
    • summary
      Lays out the child widgets.
  • dojox.layout.TableContainer.destroyDescendants

    • type
      Function
    • parameters:
      • preserveDom: (typeof Boolean)
    • source: [view]
        dojo.forEach(this._children, function(child){ child.destroyRecursive(preserveDom); });
    • summary
      Destroys all the widgets inside this.containerNode,
      but not this widget itself
  • dojox.layout.TableContainer._setSpacingAttr

    • type
      Function
    • parameters:
      • value: (typeof )
    • source: [view]
        this.spacing = value;
        if(this.table) {
         this.table.cellspacing = Number(value);
        }
    • summary
      Sets the spacing attribute.
  • dojox.layout.TableContainer._children

    • summary
  • dojox.layout.TableContainer._initialized

    • summary
  • dojox.layout.TableContainer.table

    • summary
  • dojox.layout.TableContainer.table.cellspacing

    • summary
  • dijit._Widget.label

    • summary
  • dijit._Widget.title

    • summary
  • dijit._Widget.spanLabel

    • summary
  • dijit._Widget.colspan

    • summary
  • dojox.layout

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary