]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * Demonstrates a tabbed form panel. This uses a tab panel with 3 tabs - Basic, Sliders and Toolbars - each of which is\r | |
3 | * defined below.\r | |
4 | *\r | |
5 | * See this in action at http://dev.sencha.com/deploy/sencha-touch-2-b3/examples/kitchensink/index.html#demo/forms\r | |
6 | */\r | |
7 | Ext.define('KitchenSink.view.FormPanel', {\r | |
8 | extend: 'Ext.form.Panel',\r | |
9 | \r | |
10 | requires: [\r | |
11 | 'Ext.form.FieldSet',\r | |
12 | 'Ext.field.Number',\r | |
13 | 'Ext.field.Spinner',\r | |
14 | 'Ext.field.Password',\r | |
15 | 'Ext.field.Email',\r | |
16 | 'Ext.field.Url',\r | |
17 | 'Ext.field.DatePicker',\r | |
18 | 'Ext.field.Select',\r | |
19 | 'Ext.field.Hidden',\r | |
20 | 'Ext.field.Radio'\r | |
21 | ],\r | |
22 | id: 'basicform',\r | |
23 | config: {\r | |
24 | items: [\r | |
25 | {\r | |
26 | xtype: 'fieldset',\r | |
27 | id: 'fieldset1',\r | |
28 | title: 'Personal Info',\r | |
29 | instructions: 'Please enter the information above.',\r | |
30 | defaults: {\r | |
31 | labelWidth: '35%'\r | |
32 | },\r | |
33 | items: [\r | |
34 | {\r | |
35 | xtype : 'textfield',\r | |
36 | name : 'name',\r | |
37 | label : 'Name',\r | |
38 | placeHolder : 'Tom Roy',\r | |
39 | autoCapitalize: true,\r | |
40 | required : true,\r | |
41 | clearIcon : true\r | |
42 | },\r | |
43 | {\r | |
44 | xtype: 'passwordfield',\r | |
45 | name : 'password',\r | |
46 | label: 'Password',\r | |
47 | clearIcon : !Ext.theme.is.Blackberry\r | |
48 | },\r | |
49 | {\r | |
50 | xtype : 'emailfield',\r | |
51 | name : 'email',\r | |
52 | label : 'Email',\r | |
53 | placeHolder: 'me@sencha.com',\r | |
54 | clearIcon : true\r | |
55 | },\r | |
56 | {\r | |
57 | xtype : 'urlfield',\r | |
58 | name : 'url',\r | |
59 | label : 'Url',\r | |
60 | placeHolder: 'http://sencha.com',\r | |
61 | clearIcon : true\r | |
62 | },\r | |
63 | {\r | |
64 | xtype : 'spinnerfield',\r | |
65 | name : 'spinner',\r | |
66 | label : 'Spinner',\r | |
67 | minValue : 0,\r | |
68 | maxValue : 10,\r | |
69 | stepValue : 1,\r | |
70 | cycle : true\r | |
71 | },\r | |
72 | {\r | |
73 | xtype: 'checkboxfield',\r | |
74 | name : 'cool',\r | |
75 | label: 'Cool'\r | |
76 | },\r | |
77 | {\r | |
78 | xtype: 'datepickerfield',\r | |
79 | destroyPickerOnHide: true,\r | |
80 | name : 'date',\r | |
81 | label: 'Start Date',\r | |
82 | value: new Date(),\r | |
83 | picker: {\r | |
84 | yearFrom: 1990\r | |
85 | }\r | |
86 | },\r | |
87 | {\r | |
88 | xtype: 'selectfield',\r | |
89 | name : 'rank',\r | |
90 | label: 'Rank',\r | |
91 | options: [\r | |
92 | {\r | |
93 | text : 'Master',\r | |
94 | value: 'master'\r | |
95 | },\r | |
96 | {\r | |
97 | text : 'Journeyman',\r | |
98 | value: 'journeyman'\r | |
99 | },\r | |
100 | {\r | |
101 | text : 'Apprentice',\r | |
102 | value: 'apprentice'\r | |
103 | }\r | |
104 | ]\r | |
105 | },\r | |
106 | {\r | |
107 | xtype: 'textareafield',\r | |
108 | name : 'bio',\r | |
109 | label: 'Bio'\r | |
110 | }\r | |
111 | ]\r | |
112 | },\r | |
113 | {\r | |
114 | xtype: 'fieldset',\r | |
115 | id: 'fieldset2',\r | |
116 | title: 'Favorite color',\r | |
117 | defaults: {\r | |
118 | xtype : 'radiofield',\r | |
119 | labelWidth: '35%'\r | |
120 | },\r | |
121 | items: [\r | |
122 | {\r | |
123 | name : 'color',\r | |
124 | value: 'red',\r | |
125 | label: 'Red'\r | |
126 | },\r | |
127 | {\r | |
128 | name : 'color',\r | |
129 | label: 'Blue',\r | |
130 | value: 'blue'\r | |
131 | },\r | |
132 | {\r | |
133 | name : 'color',\r | |
134 | label: 'Green',\r | |
135 | value: 'green'\r | |
136 | },\r | |
137 | {\r | |
138 | name : 'color',\r | |
139 | label: 'Purple',\r | |
140 | value: 'purple'\r | |
141 | }\r | |
142 | ]\r | |
143 | },\r | |
144 | {\r | |
145 | xtype: 'container',\r | |
146 | defaults: {\r | |
147 | xtype: 'button',\r | |
148 | style: 'margin: 1em',\r | |
149 | flex : 1\r | |
150 | },\r | |
151 | layout: {\r | |
152 | type: 'hbox'\r | |
153 | },\r | |
154 | items: [\r | |
155 | {\r | |
156 | text: 'Disable fields',\r | |
157 | ui: 'action',\r | |
158 | scope: this,\r | |
159 | hasDisabled: false,\r | |
160 | handler: function(btn){\r | |
161 | var fieldset1 = Ext.getCmp('fieldset1'),\r | |
162 | fieldset2 = Ext.getCmp('fieldset2');\r | |
163 | \r | |
164 | if (btn.hasDisabled) {\r | |
165 | fieldset1.enable();\r | |
166 | fieldset2.enable();\r | |
167 | btn.hasDisabled = false;\r | |
168 | btn.setText('Disable fields');\r | |
169 | } else {\r | |
170 | fieldset1.disable();\r | |
171 | fieldset2.disable();\r | |
172 | btn.hasDisabled = true;\r | |
173 | btn.setText('Enable fields');\r | |
174 | }\r | |
175 | }\r | |
176 | },\r | |
177 | {\r | |
178 | text: 'Reset',\r | |
179 | ui: 'action',\r | |
180 | handler: function(){\r | |
181 | Ext.getCmp('basicform').reset();\r | |
182 | }\r | |
183 | }\r | |
184 | ]\r | |
185 | }\r | |
186 | ]\r | |
187 | }\r | |
188 | });\r |