xml-form.js
3.36 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
Ext.require([
'Ext.form.*',
'Ext.data.*'
]);
Ext.onReady(function(){
Ext.define('example.contact', {
extend: 'Ext.data.Model',
fields: [
{name: 'first', mapping: 'name > first'},
{name: 'last', mapping: 'name > last'},
'company', 'email', 'state',
{name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
]
});
Ext.define('example.fielderror', {
extend: 'Ext.data.Model',
fields: ['id', 'msg']
});
var formPanel = Ext.create('Ext.form.Panel', {
renderTo: 'form-ct',
frame: true,
title:'XML Form',
width: 340,
bodyPadding: 5,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
// configure how to read the XML data
reader : Ext.create('Ext.data.reader.Xml', {
model: 'example.contact',
record : 'contact',
successProperty: '@success'
}),
// configure how to read the XML errors
errorReader: Ext.create('Ext.data.reader.Xml', {
model: 'example.fielderror',
record : 'field',
successProperty: '@success'
}),
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
width: 280
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: Ext.create('Ext.data.ArrayStore', {
fields: ['abbr', 'state'],
data : Ext.example.states // from states.js
}),
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}
]
}],
buttons: [{
text: 'Load',
handler: function(){
formPanel.getForm().load({
url: 'xml-form-data.xml',
waitMsg: 'Loading...'
});
}
}, {
text: 'Submit',
disabled: true,
formBind: true,
handler: function(){
this.up('form').getForm().submit({
url: 'xml-form-errors.xml',
submitEmptyText: false,
waitMsg: 'Saving Data...'
});
}
}]
});
});