ExtJs之Ext.XTemplate:數組填充，通路父對象

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<code>&lt;!</code><code>doctype</code> <code>html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;extjs&lt;/</code><code>title</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>meta</code> <code>http-equiv="content-type" content="text/html; charset=utf-8"/&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel="stylesheet" type="text/css" href="extjs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"&gt;</code>

<code>        </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/ext-all.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/bootstrap.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>script</code> <code>type="text/javascript" src="extjs/packages/ext-theme-crisp/build/ext-theme-crisp.js"&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type="text/javascript"&gt;</code>

<code>            </code><code>ext.onready(function(){</code>

<code>        </code><code>var tpl1 = new ext.xtemplate(</code>

<code>          </code><code>'&lt;</code><code>table</code> <code>border=1 cellpadding=1 cellspacing=1&gt;',</code>

<code>          </code><code>'&lt;</code><code>tr</code><code>&gt;&lt;</code><code>td</code> <code>width=90&gt;姓名&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code> <code>width=90&gt;年紀&lt;/</code><code>td</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;',</code>

<code>          </code><code>'&lt;</code><code>tpl</code> <code>for="."&gt;',</code>

<code>          </code><code>'&lt;</code><code>tr</code><code>&gt;&lt;</code><code>td</code><code>&gt;{name}&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code><code>&gt;{age}&lt;/</code><code>td</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;',</code>

<code>          </code><code>'&lt;/</code><code>tpl</code><code>&gt;',</code>

<code>          </code><code>'&lt;/</code><code>table</code><code>&gt;'</code>

<code>        </code><code>);</code>

<code>        </code><code>var tpldata = [</code>

<code>          </code><code>{name: '張三', age: 20},</code>

<code>          </code><code>{name: '郴四', age: 12},</code>

<code>          </code><code>{name: '五爺', age: 56},</code>

<code>          </code><code>{name: '老炮', age: 34},</code>

<code>          </code><code>{name: '學軍', age: 22}</code>

<code>        </code><code>]</code>

<code>        </code><code>tpl1.append('tpl-table1', tpldata);</code>

<code>        </code><code>var tpl2 = new ext.xtemplate(</code>

<code>          </code><code>'&lt;</code><code>tr</code><code>&gt;&lt;</code><code>td</code> <code>width=90&gt;姓名&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code> <code>width=90&gt;年紀&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code> <code>width=90&gt;公司&lt;/</code><code>td</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;',</code>

<code>          </code><code>'&lt;</code><code>tpl</code> <code>for="emps"&gt;',</code>

<code>          </code><code>'&lt;</code><code>tr</code><code>&gt;&lt;</code><code>td</code><code>&gt;{name}&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code><code>&gt;{age}&lt;/</code><code>td</code><code>&gt;&lt;</code><code>td</code><code>&gt;{parent.companyname}&lt;/</code><code>td</code><code>&gt;&lt;/</code><code>tr</code><code>&gt;',</code>

<code>        </code><code>var tpldata = {</code>

<code>          </code><code>companyname: "abc公司",</code>

<code>          </code><code>emps:[</code>

<code>            </code><code>{name: '張三', age: 20},</code>

<code>            </code><code>{name: '郴四', age: 12},</code>

<code>            </code><code>{name: '五爺', age: 56},</code>

<code>            </code><code>{name: '老炮', age: 34},</code>

<code>            </code><code>{name: '學軍', age: 22}</code>

<code>          </code><code>]</code>

<code>        </code><code>}</code>

<code>        </code><code>tpl2.append('tpl-table2', tpldata);</code>

<code>      </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id='tpl-table1'&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>br</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id='tpl-table2'&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>