+Ext.require([
+ 'Ext.form.*',
+ 'Ext.layout.container.Column',
+ 'Ext.tab.Panel'
+]);
+
+
/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
Ext.QuickTips.init();
- // turn on validation errors beside the field globally
- Ext.form.Field.prototype.msgTarget = 'side';
-
var bd = Ext.getBody();
/*
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'
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: [{
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: [{
- 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',
}]
},{
title:'Phone Numbers',
- layout:'form',
- defaults: {width: 230},
defaultType: 'textfield',
items: [{
*/
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',
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',
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
- value: 'Jack'
+ value: 'Jamie'
},{
fieldLabel: 'Last Name',
name: 'last',
- value: 'Slocum'
+ value: 'Avins'
},{
fieldLabel: 'Company',
name: 'company',
}]
},{
title:'Phone Numbers',
- layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
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'
}
}]
}],
});
tab2.render(document.body);
-});
\ No newline at end of file
+});
+
+
git.ithinksw.org / extjs.git / blobdiff