+++ /dev/null
-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">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);
-});</pre> \r
-</body>\r
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff