X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/form/dynamic.js diff --git a/examples/form/dynamic.js b/examples/form/dynamic.js index e342db9a..0ed11928 100644 --- a/examples/form/dynamic.js +++ b/examples/form/dynamic.js @@ -1,16 +1,20 @@ +Ext.require([ + 'Ext.form.*', + 'Ext.layout.container.Column', + 'Ext.tab.Panel' +]); + + /*! - * Ext JS Library 3.0.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * 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(); /* @@ -19,37 +23,42 @@ Ext.onReady(function(){ bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'}); - var simple = new Ext.FormPanel({ - labelWidth: 75, // label settings here cascade unless overridden + var simple = Ext.create('Ext.form.Panel', { url:'save-form.php', frame:true, title: 'Simple Form', bodyStyle:'padding:5px 5px 0', width: 350, - defaults: {width: 230}, + fieldDefaults: { + msgTarget: 'side', + labelWidth: 75 + }, defaultType: 'textfield', + defaults: { + anchor: '100%' + }, 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' - }) - ], + fieldLabel: 'First Name', + name: 'first', + allowBlank:false + },{ + fieldLabel: 'Last Name', + name: 'last' + },{ + fieldLabel: 'Company', + name: 'company' + }, { + fieldLabel: 'Email', + name: 'email', + vtype:'email' + }, { + xtype: 'timefield', + fieldLabel: 'Time', + name: 'time', + minValue: '8:00am', + maxValue: '6:00pm' + }], buttons: [{ text: 'Save' @@ -60,66 +69,74 @@ Ext.onReady(function(){ 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 + var fsf = Ext.create('Ext.form.Panel', { url:'save-form.php', frame:true, title: 'Simple Form with FieldSets', bodyStyle:'padding:5px 5px 0', width: 350, + fieldDefaults: { + msgTarget: 'side', + labelWidth: 75 + }, + defaults: { + anchor: '100%' + }, items: [{ xtype:'fieldset', checkboxToggle:true, title: 'User Information', - autoHeight:true, - defaults: {width: 210}, defaultType: 'textfield', collapsed: true, + layout: 'anchor', + defaults: { + anchor: '100%' + }, items :[{ - fieldLabel: 'First Name', - name: 'first', - allowBlank:false - },{ - fieldLabel: 'Last Name', - name: 'last' - },{ - fieldLabel: 'Company', - name: 'company' - }, { - fieldLabel: 'Email', - name: 'email', - vtype:'email' - } - ] + 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', + layout: 'anchor', + defaults: { + anchor: '100%' + }, items :[{ - fieldLabel: 'Home', - name: 'home', - value: '(888) 555-1212' - },{ - fieldLabel: 'Business', - name: 'business' - },{ - fieldLabel: 'Mobile', - name: 'mobile' - },{ - fieldLabel: 'Fax', - name: 'fax' - } - ] + fieldLabel: 'Home', + name: 'home', + value: '(888) 555-1212' + },{ + fieldLabel: 'Business', + name: 'business' + },{ + fieldLabel: 'Mobile', + name: 'mobile' + },{ + fieldLabel: 'Fax', + name: 'fax' + }] }], buttons: [{ @@ -137,50 +154,58 @@ Ext.onReady(function(){ bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'}); - var top = new Ext.FormPanel({ - labelAlign: 'top', + var top = Ext.create('Ext.form.Panel', { frame:true, title: 'Multi Column, Nested Layouts and Anchoring', bodyStyle:'padding:5px 5px 0', width: 600, + fieldDefaults: { + labelAlign: 'top', + msgTarget: 'side' + }, + items: [{ + xtype: 'container', + anchor: '100%', layout:'column', items:[{ + xtype: 'container', columnWidth:.5, - layout: 'form', + layout: 'anchor', items: [{ xtype:'textfield', fieldLabel: 'First Name', name: 'first', - anchor:'95%' + anchor:'96%' }, { xtype:'textfield', fieldLabel: 'Company', name: 'company', - anchor:'95%' + anchor:'96%' }] },{ + xtype: 'container', columnWidth:.5, - layout: 'form', + layout: 'anchor', items: [{ xtype:'textfield', fieldLabel: 'Last Name', name: 'last', - anchor:'95%' + anchor:'100%' },{ xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', - anchor:'95%' + anchor:'100%' }] }] - },{ - xtype:'htmleditor', - id:'bio', - fieldLabel:'Biography', - height:200, - anchor:'98%' + }, { + xtype: 'htmleditor', + name: 'bio', + fieldLabel: 'Biography', + height: 200, + anchor: '100%' }], buttons: [{ @@ -200,30 +225,38 @@ Ext.onReady(function(){ - var tabs = new Ext.FormPanel({ - labelWidth: 75, - border:false, + var tabs = Ext.create('Ext.form.Panel', { width: 350, + border: false, + bodyBorder: false, + fieldDefaults: { + labelWidth: 75, + msgTarget: 'side' + }, + defaults: { + anchor: '100%' + }, items: { xtype:'tabpanel', activeTab: 0, - defaults:{autoHeight:true, bodyStyle:'padding:10px'}, + 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' + value: 'Ed' },{ fieldLabel: 'Last Name', name: 'last', - value: 'Slocum' + value: 'Spencer' },{ fieldLabel: 'Company', name: 'company', @@ -235,8 +268,6 @@ Ext.onReady(function(){ }] },{ title:'Phone Numbers', - layout:'form', - defaults: {width: 230}, defaultType: 'textfield', items: [{ @@ -272,40 +303,45 @@ Ext.onReady(function(){ */ bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'}); - var tab2 = new Ext.FormPanel({ - labelAlign: 'top', + var tab2 = Ext.create('Ext.form.Panel', { title: 'Inner Tabs', bodyStyle:'padding:5px', width: 600, + fieldDefaults: { + labelAlign: 'top', + msgTarget: 'side' + }, + defaults: { + anchor: '100%' + }, + items: [{ layout:'column', border:false, items:[{ columnWidth:.5, - layout: 'form', border:false, + layout: 'anchor', + defaultType: 'textfield', items: [{ - xtype:'textfield', fieldLabel: 'First Name', name: 'first', anchor:'95%' }, { - xtype:'textfield', fieldLabel: 'Company', name: 'company', anchor:'95%' }] },{ columnWidth:.5, - layout: 'form', border:false, + layout: 'anchor', + defaultType: 'textfield', items: [{ - xtype:'textfield', fieldLabel: 'Last Name', name: 'last', anchor:'95%' },{ - xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', @@ -320,7 +356,6 @@ Ext.onReady(function(){ defaults:{bodyStyle:'padding:10px'}, items:[{ title:'Personal Details', - layout:'form', defaults: {width: 230}, defaultType: 'textfield', @@ -328,11 +363,11 @@ Ext.onReady(function(){ fieldLabel: 'First Name', name: 'first', allowBlank:false, - value: 'Jack' + value: 'Jamie' },{ fieldLabel: 'Last Name', name: 'last', - value: 'Slocum' + value: 'Avins' },{ fieldLabel: 'Company', name: 'company', @@ -344,7 +379,6 @@ Ext.onReady(function(){ }] },{ title:'Phone Numbers', - layout:'form', defaults: {width: 230}, defaultType: 'textfield', @@ -363,13 +397,13 @@ Ext.onReady(function(){ name: 'fax' }] },{ - cls:'x-plain', - title:'Biography', - layout:'fit', + cls: 'x-plain', + title: 'Biography', + layout: 'fit', items: { - xtype:'htmleditor', - id:'bio2', - fieldLabel:'Biography' + xtype: 'htmleditor', + name: 'bio2', + fieldLabel: 'Biography' } }] }], @@ -382,4 +416,6 @@ Ext.onReady(function(){ }); tab2.render(document.body); -}); \ No newline at end of file +}); + +