-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
-\r
- Ext.QuickTips.init();\r
-\r
- // turn on validation errors beside the field globally\r
- Ext.form.Field.prototype.msgTarget = 'side';\r
-\r
- var bd = Ext.getBody();\r
-\r
- /*\r
- * ================ Simple form =======================\r
- */\r
- bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});\r
-\r
-\r
- var simple = new Ext.FormPanel({\r
- labelWidth: 75, // label settings here cascade unless overridden\r
- url:'save-form.php',\r
- frame:true,\r
- title: 'Simple Form',\r
- bodyStyle:'padding:5px 5px 0',\r
- width: 350,\r
- defaults: {width: 230},\r
- defaultType: 'textfield',\r
-\r
- items: [{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank:false\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company'\r
- }, {\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }, new Ext.form.TimeField({\r
- fieldLabel: 'Time',\r
- name: 'time',\r
- minValue: '8:00am',\r
- maxValue: '6:00pm'\r
- })\r
- ],\r
-\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
- });\r
-\r
- simple.render(document.body);\r
-\r
- \r
- /*\r
- * ================ Form 2 =======================\r
- */\r
- bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});\r
-\r
- var fsf = new Ext.FormPanel({\r
- labelWidth: 75, // label settings here cascade unless overridden\r
- url:'save-form.php',\r
- frame:true,\r
- title: 'Simple Form with FieldSets',\r
- bodyStyle:'padding:5px 5px 0',\r
- width: 350,\r
-\r
- items: [{\r
- xtype:'fieldset',\r
- checkboxToggle:true,\r
- title: 'User Information',\r
- autoHeight:true,\r
- defaults: {width: 210},\r
- defaultType: 'textfield',\r
- collapsed: true,\r
- items :[{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank:false\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company'\r
- }, {\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }\r
- ]\r
- },{\r
- xtype:'fieldset',\r
- title: 'Phone Number',\r
- collapsible: true,\r
- autoHeight:true,\r
- defaults: {width: 210},\r
- defaultType: 'textfield',\r
- items :[{\r
- fieldLabel: 'Home',\r
- name: 'home',\r
- value: '(888) 555-1212'\r
- },{\r
- fieldLabel: 'Business',\r
- name: 'business'\r
- },{\r
- fieldLabel: 'Mobile',\r
- name: 'mobile'\r
- },{\r
- fieldLabel: 'Fax',\r
- name: 'fax'\r
- }\r
- ]\r
- }],\r
-\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
- });\r
-\r
- fsf.render(document.body);\r
-\r
- /*\r
- * ================ Form 3 =======================\r
- */\r
- bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});\r
-\r
-\r
- var top = new Ext.FormPanel({\r
- labelAlign: 'top',\r
- frame:true,\r
- title: 'Multi Column, Nested Layouts and Anchoring',\r
- bodyStyle:'padding:5px 5px 0',\r
- width: 600,\r
- items: [{\r
- layout:'column',\r
- items:[{\r
- columnWidth:.5,\r
- layout: 'form',\r
- items: [{\r
- xtype:'textfield',\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- anchor:'95%'\r
- }, {\r
- xtype:'textfield',\r
- fieldLabel: 'Company',\r
- name: 'company',\r
- anchor:'95%'\r
- }]\r
- },{\r
- columnWidth:.5,\r
- layout: 'form',\r
- items: [{\r
- xtype:'textfield',\r
- fieldLabel: 'Last Name',\r
- name: 'last',\r
- anchor:'95%'\r
- },{\r
- xtype:'textfield',\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email',\r
- anchor:'95%'\r
- }]\r
- }]\r
- },{\r
- xtype:'htmleditor',\r
- id:'bio',\r
- fieldLabel:'Biography',\r
- height:200,\r
- anchor:'98%'\r
- }],\r
-\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
- });\r
-\r
- top.render(document.body);\r
-\r
-\r
- /*\r
- * ================ Form 4 =======================\r
- */\r
- bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});\r
-\r
-\r
-\r
- var tabs = new Ext.FormPanel({\r
- labelWidth: 75,\r
- border:false,\r
- width: 350,\r
-\r
- items: {\r
- xtype:'tabpanel',\r
- activeTab: 0,\r
- defaults:{autoHeight:true, bodyStyle:'padding:10px'}, \r
- items:[{\r
- title:'Personal Details',\r
- layout:'form',\r
- defaults: {width: 230},\r
- defaultType: 'textfield',\r
-\r
- items: [{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank:false,\r
- value: 'Jack'\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last',\r
- value: 'Slocum'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company',\r
- value: 'Ext JS'\r
- }, {\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }]\r
- },{\r
- title:'Phone Numbers',\r
- layout:'form',\r
- defaults: {width: 230},\r
- defaultType: 'textfield',\r
-\r
- items: [{\r
- fieldLabel: 'Home',\r
- name: 'home',\r
- value: '(888) 555-1212'\r
- },{\r
- fieldLabel: 'Business',\r
- name: 'business'\r
- },{\r
- fieldLabel: 'Mobile',\r
- name: 'mobile'\r
- },{\r
- fieldLabel: 'Fax',\r
- name: 'fax'\r
- }]\r
- }]\r
- },\r
-\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
- });\r
-\r
- tabs.render(document.body);\r
-\r
-\r
-\r
- /*\r
- * ================ Form 5 =======================\r
- */\r
- bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});\r
-\r
- var tab2 = new Ext.FormPanel({\r
- labelAlign: 'top',\r
- title: 'Inner Tabs',\r
- bodyStyle:'padding:5px',\r
- width: 600,\r
- items: [{\r
- layout:'column',\r
- border:false,\r
- items:[{\r
- columnWidth:.5,\r
- layout: 'form',\r
- border:false,\r
- items: [{\r
- xtype:'textfield',\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- anchor:'95%'\r
- }, {\r
- xtype:'textfield',\r
- fieldLabel: 'Company',\r
- name: 'company',\r
- anchor:'95%'\r
- }]\r
- },{\r
- columnWidth:.5,\r
- layout: 'form',\r
- border:false,\r
- items: [{\r
- xtype:'textfield',\r
- fieldLabel: 'Last Name',\r
- name: 'last',\r
- anchor:'95%'\r
- },{\r
- xtype:'textfield',\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email',\r
- anchor:'95%'\r
- }]\r
- }]\r
- },{\r
- xtype:'tabpanel',\r
- plain:true,\r
- activeTab: 0,\r
- height:235,\r
- defaults:{bodyStyle:'padding:10px'},\r
- items:[{\r
- title:'Personal Details',\r
- layout:'form',\r
- defaults: {width: 230},\r
- defaultType: 'textfield',\r
-\r
- items: [{\r
- fieldLabel: 'First Name',\r
- name: 'first',\r
- allowBlank:false,\r
- value: 'Jack'\r
- },{\r
- fieldLabel: 'Last Name',\r
- name: 'last',\r
- value: 'Slocum'\r
- },{\r
- fieldLabel: 'Company',\r
- name: 'company',\r
- value: 'Ext JS'\r
- }, {\r
- fieldLabel: 'Email',\r
- name: 'email',\r
- vtype:'email'\r
- }]\r
- },{\r
- title:'Phone Numbers',\r
- layout:'form',\r
- defaults: {width: 230},\r
- defaultType: 'textfield',\r
-\r
- items: [{\r
- fieldLabel: 'Home',\r
- name: 'home',\r
- value: '(888) 555-1212'\r
- },{\r
- fieldLabel: 'Business',\r
- name: 'business'\r
- },{\r
- fieldLabel: 'Mobile',\r
- name: 'mobile'\r
- },{\r
- fieldLabel: 'Fax',\r
- name: 'fax'\r
- }]\r
- },{\r
- cls:'x-plain',\r
- title:'Biography',\r
- layout:'fit',\r
- items: {\r
- xtype:'htmleditor',\r
- id:'bio2',\r
- fieldLabel:'Biography'\r
- }\r
- }]\r
- }],\r
-\r
- buttons: [{\r
- text: 'Save'\r
- },{\r
- text: 'Cancel'\r
- }]\r
- });\r
-\r
- tab2.render(document.body);\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){
+
+ Ext.QuickTips.init();
+
+ // turn on validation errors beside the field globally
+ Ext.form.Field.prototype.msgTarget = 'side';
+
+ var bd = Ext.getBody();
+
+ /*
+ * ================ Simple form =======================
+ */
+ bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
+
+
+ var simple = new Ext.FormPanel({
+ labelWidth: 75, // label settings here cascade unless overridden
+ url:'save-form.php',
+ frame:true,
+ title: 'Simple Form',
+ bodyStyle:'padding:5px 5px 0',
+ width: 350,
+ defaults: {width: 230},
+ defaultType: 'textfield',
+
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }, {
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }, new Ext.form.TimeField({
+ fieldLabel: 'Time',
+ name: 'time',
+ minValue: '8:00am',
+ maxValue: '6:00pm'
+ })
+ ],
+
+ buttons: [{
+ text: 'Save'
+ },{
+ text: 'Cancel'
+ }]
+ });
+
+ simple.render(document.body);
+
+
+ /*
+ * ================ Form 2 =======================
+ */
+ bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
+
+ var fsf = new Ext.FormPanel({
+ labelWidth: 75, // label settings here cascade unless overridden
+ url:'save-form.php',
+ frame:true,
+ title: 'Simple Form with FieldSets',
+ bodyStyle:'padding:5px 5px 0',
+ width: 350,
+
+ items: [{
+ xtype:'fieldset',
+ checkboxToggle:true,
+ title: 'User Information',
+ autoHeight:true,
+ defaults: {width: 210},
+ defaultType: 'textfield',
+ collapsed: true,
+ items :[{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last'
+ },{
+ fieldLabel: 'Company',
+ name: 'company'
+ }, {
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }
+ ]
+ },{
+ xtype:'fieldset',
+ title: 'Phone Number',
+ collapsible: true,
+ autoHeight:true,
+ defaults: {width: 210},
+ defaultType: 'textfield',
+ items :[{
+ fieldLabel: 'Home',
+ name: 'home',
+ value: '(888) 555-1212'
+ },{
+ fieldLabel: 'Business',
+ name: 'business'
+ },{
+ fieldLabel: 'Mobile',
+ name: 'mobile'
+ },{
+ fieldLabel: 'Fax',
+ name: 'fax'
+ }
+ ]
+ }],
+
+ buttons: [{
+ text: 'Save'
+ },{
+ text: 'Cancel'
+ }]
+ });
+
+ fsf.render(document.body);
+
+ /*
+ * ================ Form 3 =======================
+ */
+ bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
+
+
+ var top = new Ext.FormPanel({
+ labelAlign: 'top',
+ frame:true,
+ title: 'Multi Column, Nested Layouts and Anchoring',
+ bodyStyle:'padding:5px 5px 0',
+ width: 600,
+ items: [{
+ layout:'column',
+ items:[{
+ columnWidth:.5,
+ layout: 'form',
+ items: [{
+ xtype:'textfield',
+ fieldLabel: 'First Name',
+ name: 'first',
+ anchor:'95%'
+ }, {
+ xtype:'textfield',
+ fieldLabel: 'Company',
+ name: 'company',
+ anchor:'95%'
+ }]
+ },{
+ columnWidth:.5,
+ layout: 'form',
+ items: [{
+ xtype:'textfield',
+ fieldLabel: 'Last Name',
+ name: 'last',
+ anchor:'95%'
+ },{
+ xtype:'textfield',
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email',
+ anchor:'95%'
+ }]
+ }]
+ },{
+ xtype:'htmleditor',
+ id:'bio',
+ fieldLabel:'Biography',
+ height:200,
+ anchor:'98%'
+ }],
+
+ buttons: [{
+ text: 'Save'
+ },{
+ text: 'Cancel'
+ }]
+ });
+
+ top.render(document.body);
+
+
+ /*
+ * ================ Form 4 =======================
+ */
+ bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
+
+
+
+ var tabs = new Ext.FormPanel({
+ labelWidth: 75,
+ border:false,
+ width: 350,
+
+ items: {
+ xtype:'tabpanel',
+ activeTab: 0,
+ defaults:{autoHeight:true, bodyStyle:'padding:10px'},
+ items:[{
+ title:'Personal Details',
+ layout:'form',
+ defaults: {width: 230},
+ defaultType: 'textfield',
+
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false,
+ value: 'Jack'
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last',
+ value: 'Slocum'
+ },{
+ fieldLabel: 'Company',
+ name: 'company',
+ value: 'Ext JS'
+ }, {
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }]
+ },{
+ title:'Phone Numbers',
+ layout:'form',
+ defaults: {width: 230},
+ defaultType: 'textfield',
+
+ items: [{
+ fieldLabel: 'Home',
+ name: 'home',
+ value: '(888) 555-1212'
+ },{
+ fieldLabel: 'Business',
+ name: 'business'
+ },{
+ fieldLabel: 'Mobile',
+ name: 'mobile'
+ },{
+ fieldLabel: 'Fax',
+ name: 'fax'
+ }]
+ }]
+ },
+
+ buttons: [{
+ text: 'Save'
+ },{
+ text: 'Cancel'
+ }]
+ });
+
+ tabs.render(document.body);
+
+
+
+ /*
+ * ================ Form 5 =======================
+ */
+ bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
+
+ var tab2 = new Ext.FormPanel({
+ labelAlign: 'top',
+ title: 'Inner Tabs',
+ bodyStyle:'padding:5px',
+ width: 600,
+ items: [{
+ layout:'column',
+ border:false,
+ items:[{
+ columnWidth:.5,
+ layout: 'form',
+ border:false,
+ items: [{
+ xtype:'textfield',
+ fieldLabel: 'First Name',
+ name: 'first',
+ anchor:'95%'
+ }, {
+ xtype:'textfield',
+ fieldLabel: 'Company',
+ name: 'company',
+ anchor:'95%'
+ }]
+ },{
+ columnWidth:.5,
+ layout: 'form',
+ border:false,
+ items: [{
+ xtype:'textfield',
+ fieldLabel: 'Last Name',
+ name: 'last',
+ anchor:'95%'
+ },{
+ xtype:'textfield',
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email',
+ anchor:'95%'
+ }]
+ }]
+ },{
+ xtype:'tabpanel',
+ plain:true,
+ activeTab: 0,
+ height:235,
+ defaults:{bodyStyle:'padding:10px'},
+ items:[{
+ title:'Personal Details',
+ layout:'form',
+ defaults: {width: 230},
+ defaultType: 'textfield',
+
+ items: [{
+ fieldLabel: 'First Name',
+ name: 'first',
+ allowBlank:false,
+ value: 'Jack'
+ },{
+ fieldLabel: 'Last Name',
+ name: 'last',
+ value: 'Slocum'
+ },{
+ fieldLabel: 'Company',
+ name: 'company',
+ value: 'Ext JS'
+ }, {
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }]
+ },{
+ title:'Phone Numbers',
+ layout:'form',
+ defaults: {width: 230},
+ defaultType: 'textfield',
+
+ items: [{
+ fieldLabel: 'Home',
+ name: 'home',
+ value: '(888) 555-1212'
+ },{
+ fieldLabel: 'Business',
+ name: 'business'
+ },{
+ fieldLabel: 'Mobile',
+ name: 'mobile'
+ },{
+ fieldLabel: 'Fax',
+ name: 'fax'
+ }]
+ },{
+ cls:'x-plain',
+ title:'Biography',
+ layout:'fit',
+ items: {
+ xtype:'htmleditor',
+ id:'bio2',
+ fieldLabel:'Biography'
+ }
+ }]
+ }],
+
+ buttons: [{
+ text: 'Save'
+ },{
+ text: 'Cancel'
+ }]
+ });
+
+ tab2.render(document.body);
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff