Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / form / dynamic.js
index 75d0cb9..0b31e9c 100644 (file)
-/*\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.3
+ * 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