← Back to branch summary

~crf-team/crf-irp/crf-irp

« back to all changes in this revision

Viewing changes to WebContent/js/extjs-2/docs/output/TableLayout.jss.html

  • Committer: Thomas
  • Date: 2010-03-10 23:55:46 UTC
  • Revision ID: thomas@daisybox-port-20100310235546-23635dk6x5asb1ca
Upgrade ExtJs 3.1.1
Upgrade Spring 3.0.1 + dependencies
Change Jawr JS post processor : YUI
Upgrade to last build of dwr 3 trunk 69 revision 3019(after build 116), upgrade jawr-dwr plugin 1.4 unofficiale from jose noheda, Jawr 3.2.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
WebContent/js/extjs-2/docs/output/TableLayout.jss.html
1
 
<html><head><title>TableLayout.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>TableLayout.js</h1><pre class="highlighted"><code><i>/**
2
 
 * @class Ext.layout.TableLayout
3
 
 * @extends Ext.layout.ContainerLayout
4
 
 * &lt;p&gt;This layout allows you to easily render content into an HTML table.  The total number of columns can be
5
 
 * specified, and rowspan and colspan can be used to create complex layouts within the table.
6
 
 * This class is intended to be extended or created via the layout:<em>'table'</em> {@link Ext.Container#layout} config,
7
 
 * and should generally not need to be created directly via the <b>new</b> keyword.&lt;/p&gt;
8
 
 * &lt;p&gt;Note that when creating a layout via config, the layout-specific config properties must be passed <b>in</b> via
9
 
 * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout.  In the
10
 
 * <b>case</b> of TableLayout, the only valid layout config property is {@link #columns}.  However, the items added to a
11
 
 * TableLayout can supply the following table-specific config properties:&lt;/p&gt;
12
 
 * &lt;ul&gt;
13
 
 * &lt;li&gt;&lt;b&gt;rowspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
14
 
 * &lt;li&gt;&lt;b&gt;colspan&lt;/b&gt; Applied to the table cell containing the item.&lt;/li&gt;
15
 
 * &lt;li&gt;&lt;b&gt;cellId&lt;/b&gt; An id applied to the table cell containing the item.&lt;/li&gt;
16
 
 * &lt;li&gt;&lt;b&gt;cellCls&lt;/b&gt; A CSS class name added to the table cell containing the item.&lt;/li&gt;
17
 
 * &lt;/ul&gt;
18
 
 * &lt;p&gt;The basic concept of building up a TableLayout is conceptually very similar to building up a standard
19
 
 * HTML table.  You simply add each panel (or &quot;cell&quot;) that you want to include along <b>with</b> any span attributes
20
 
 * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.
21
 
 * Rather than explicitly creating and nesting rows and columns as you would <b>in</b> HTML, you simply specify the
22
 
 * total column count <b>in</b> the layoutConfig and start adding panels <b>in</b> their natural order from left to right,
23
 
 * top to bottom.  The layout will automatically figure out, based on the column count, rowspans and colspans,
24
 
 * how to position each panel within the table.  Just like <b>with</b> HTML tables, your rowspans and colspans must add
25
 
 * up correctly <b>in</b> your overall layout or you'll end up <b>with</b> missing and/or extra cells!  Example usage:&lt;/p&gt;
26
 
 * &lt;pre&gt;&lt;code&gt;
27
 
<i>// This code will generate a layout table that is 3 columns by 2 rows</i>
28
 
<i>// <b>with</b> some spanning included.  The basic layout will be:</i>
29
 
<i>// +--------+-----------------+</i>
30
 
<i>// |   A    |   B             |</i>
31
 
<i>// |        |--------+--------|</i>
32
 
<i>// |        |   C    |   D    |</i>
33
 
<i>// +--------+--------+--------+</i>
34
 
<b>var</b> table = <b>new</b> Ext.Panel({
35
 
    title: <em>'Table Layout'</em>,
36
 
    layout:<em>'table'</em>,
37
 
    defaults: {
38
 
        <i>// applied to each contained panel</i>
39
 
        bodyStyle:<em>'padding:20px'</em>
40
 
    },
41
 
    layoutConfig: {
42
 
        <i>// The total column count must be specified here</i>
43
 
        columns: 3
44
 
    },
45
 
    items: [{
46
 
        html: <em>'&amp;lt;p&amp;gt;Cell A content&amp;lt;/p&amp;gt;'</em>,
47
 
        rowspan: 2
48
 
    },{
49
 
        html: <em>'&amp;lt;p&amp;gt;Cell B content&amp;lt;/p&amp;gt;'</em>,
50
 
        colspan: 2
51
 
    },{
52
 
        html: <em>'&amp;lt;p&amp;gt;Cell C content&amp;lt;/p&amp;gt;'</em>,
53
 
        cellCls: <em>'highlight'</em>
54
 
    },{
55
 
        html: <em>'&amp;lt;p&amp;gt;Cell D content&amp;lt;/p&amp;gt;'</em>
56
 
    }]
57
 
});
58
 
&lt;/code&gt;&lt;/pre&gt;
59
 
 */</i>
60
 
Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
61
 
    <i>/**
62
 
     * @cfg {Number} columns
63
 
     * The total number of columns to create <b>in</b> the table <b>for</b> this layout.  If not specified, all panels added to
64
 
      * <b>this</b> layout will be rendered into a single row using a column per panel.
65
 
     */</i>
66
 
 
67
 
    <i>// private</i>
68
 
    monitorResize:false,
69
 
 
70
 
    <i>// private</i>
71
 
    setContainer : <b>function</b>(ct){
72
 
        Ext.layout.TableLayout.superclass.setContainer.call(<b>this</b>, ct);
73
 
 
74
 
        <b>this</b>.currentRow = 0;
75
 
        <b>this</b>.currentColumn = 0;
76
 
        <b>this</b>.cells = [];
77
 
    },
78
 
 
79
 
    <i>// private</i>
80
 
    onLayout : <b>function</b>(ct, target){
81
 
        <b>var</b> cs = ct.items.items, len = cs.length, c, i;
82
 
 
83
 
        <b>if</b>(!<b>this</b>.table){
84
 
            target.addClass(<em>'x-table-layout-ct'</em>);
85
 
 
86
 
            <b>this</b>.table = target.createChild(
87
 
                {tag:<em>'table'</em>, cls:<em>'x-table-layout'</em>, cellspacing: 0, cn: {tag: <em>'tbody'</em>}}, null, true);
88
 
        }
89
 
        <b>this</b>.renderAll(ct, target);
90
 
    },
91
 
 
92
 
    <i>// private</i>
93
 
    getRow : <b>function</b>(index){
94
 
        <b>var</b> row = <b>this</b>.table.tBodies[0].childNodes[index];
95
 
        <b>if</b>(!row){
96
 
            row = document.createElement(<em>'tr'</em>);
97
 
            <b>this</b>.table.tBodies[0].appendChild(row);
98
 
        }
99
 
        <b>return</b> row;
100
 
    },
101
 
 
102
 
    <i>// private</i>
103
 
        getNextCell : <b>function</b>(c){
104
 
                <b>var</b> cell = <b>this</b>.getNextNonSpan(<b>this</b>.currentColumn, <b>this</b>.currentRow);
105
 
                <b>var</b> curCol = <b>this</b>.currentColumn = cell[0], curRow = <b>this</b>.currentRow = cell[1];
106
 
                <b>for</b>(var rowIndex = curRow; rowIndex &lt; curRow + (c.rowspan || 1); rowIndex++){
107
 
                        <b>if</b>(!<b>this</b>.cells[rowIndex]){
108
 
                                <b>this</b>.cells[rowIndex] = [];
109
 
                        }
110
 
                        <b>for</b>(var colIndex = curCol; colIndex &lt; curCol + (c.colspan || 1); colIndex++){
111
 
                                <b>this</b>.cells[rowIndex][colIndex] = true;
112
 
                        }
113
 
                }
114
 
                <b>var</b> td = document.createElement(<em>'td'</em>);
115
 
                <b>if</b>(c.cellId){
116
 
                        td.id = c.cellId;
117
 
                }
118
 
                <b>var</b> cls = <em>'x-table-layout-cell'</em>;
119
 
                <b>if</b>(c.cellCls){
120
 
                        cls += <em>' '</em> + c.cellCls;
121
 
                }
122
 
                td.className = cls;
123
 
                <b>if</b>(c.colspan){
124
 
                        td.colSpan = c.colspan;
125
 
                }
126
 
                <b>if</b>(c.rowspan){
127
 
                        td.rowSpan = c.rowspan;
128
 
                }
129
 
                <b>this</b>.getRow(curRow).appendChild(td);
130
 
                <b>return</b> td;
131
 
        },
132
 
    
133
 
    <i>// private</i>
134
 
        getNextNonSpan: <b>function</b>(colIndex, rowIndex){
135
 
                <b>var</b> cols = <b>this</b>.columns;
136
 
                <b>while</b>((cols &amp;&amp; colIndex &gt;= cols) || (<b>this</b>.cells[rowIndex] &amp;&amp; <b>this</b>.cells[rowIndex][colIndex])) {
137
 
                        <b>if</b>(cols &amp;&amp; colIndex &gt;= cols){
138
 
                                rowIndex++;
139
 
                                colIndex = 0;
140
 
                        }<b>else</b>{
141
 
                                colIndex++;
142
 
                        }
143
 
                }
144
 
                <b>return</b> [colIndex, rowIndex];
145
 
        },
146
 
 
147
 
    <i>// private</i>
148
 
    renderItem : <b>function</b>(c, position, target){
149
 
        <b>if</b>(c &amp;&amp; !c.rendered){
150
 
            c.render(<b>this</b>.getNextCell(c));
151
 
            <b>if</b>(this.extraCls){
152
 
                <b>var</b> t = c.getPositionEl ? c.getPositionEl() : c;
153
 
                t.addClass(<b>this</b>.extraCls);
154
 
            }
155
 
        }
156
 
    },
157
 
 
158
 
    <i>// private</i>
159
 
    isValidParent : <b>function</b>(c, target){
160
 
        <b>return</b> true;
161
 
    }
162
 
 
163
 
    <i>/**
164
 
     * @property activeItem
165
 
     * @hide
166
 
     */</i>
167
 
});
168
 
 
169
 
Ext.Container.LAYOUTS[<em>'table'</em>] = Ext.layout.TableLayout;</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
170
 
    </body></html>
 
 
b'\\ No newline at end of file'