ExtJs之Ajax模式的表單資料加載

簡單：

<a href="http://www.cnblogs.com/aguncn/p/5324104.html#">?</a>

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

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<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>ext.quicktips.init();</code>

<code>        </code><code>var productform = ext.create('ext.form.panel', {</code>

<code>          </code><code>title: 'sample',</code>

<code>          </code><code>frame: true,</code>

<code>          </code><code>height: 300,</code>

<code>          </code><code>width: 600,</code>

<code>          </code><code>renderto: ext.getbody(),</code>

<code>          </code><code>bodypadding: 5,</code>

<code>          </code><code>fielddefaults: {</code>

<code>            </code><code>labelseparator: ': ',</code>

<code>            </code><code>labelwidth: 100,</code>

<code>            </code><code>width: 400,</code>

<code>            </code><code>labelalign: 'left'</code>

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

<code>          </code><code>items: [{</code>

<code>            </code><code>fieldlabel: '産品名稱',</code>

<code>            </code><code>xtype: 'textfield',</code>

<code>            </code><code>name: 'productname',</code>

<code>            </code><code>value: 'u盤'</code>

<code>          </code><code>},{</code>

<code>            </code><code>fieldlabel: '金額',</code>

<code>            </code><code>xtype: 'numberfield',</code>

<code>            </code><code>name: 'price',</code>

<code>            </code><code>value: '100'</code>

<code>            </code><code>fieldlabel: '生産日期',</code>

<code>            </code><code>xtype: 'datefield',</code>

<code>            </code><code>format: 'ymd',</code>

<code>            </code><code>name: 'date',</code>

<code>            </code><code>value: new date()</code>

<code>            </code><code>xtype: 'hidden',</code>

<code>            </code><code>name: 'productid',</code>

<code>            </code><code>value: '001'</code>

<code>            </code><code>fieldlabel: '産品簡介',</code>

<code>            </code><code>name: 'introduction',</code>

<code>            </code><code>xtype: 'textarea'</code>

<code>          </code><code>}],</code>

<code>          </code><code>buttons: [{</code>

<code>            </code><code>text: '加載簡介',</code>

<code>            </code><code>handler: loadintroduction</code>

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

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

<code>        </code><code>function loadintroduction(){</code>

<code>          </code><code>var params = productform.getform().getvalues();</code>

<code>          </code><code>productform.getform().load({</code>

<code>            </code><code>params: params,</code>

<code>            </code><code>url: 'source.html',</code>

<code>            </code><code>method: 'get',</code>

<code>            </code><code>success: function(form, action){</code>

<code>              </code><code>ext.msg.alert('notice', '産品簡介加載成功');</code>

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

<code>            </code><code>failure: function(form, action){</code>

<code>              </code><code>ext.msg.alert('error', 'load failure');</code>

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

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

<code>        </code><code>}</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>

　　source.html

<code>{success: true, data: {introduction: '本産品美觀實用，售後服務優秀'}}</code>