X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/examples/form/dynamic.js diff --git a/examples/form/dynamic.js b/examples/form/dynamic.js index 75d0cb9c..3fb82b1b 100644 --- a/examples/form/dynamic.js +++ b/examples/form/dynamic.js @@ -1,387 +1,391 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://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); +/*! + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.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, + /* + By turning off deferred rendering we are guaranteeing that the + form fields within tabs that are not activated will still be rendered. + This is often important when creating multi-tabbed forms. + */ + deferredRender: false, + 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