Set defaults: {width: 230} for FormPanel : FormPanel « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. FormPanel

Set defaults: {width: 230} for FormPanel

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * 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);

});
</script> 

</div>
</body>
</html>








Related examples in the same category

1.Create a form panel and add to window
2.Create form panel and add to window
3.Add fields to form panel
4.Render form panel to html body
5.Set width, height and title for form panel
6.Set defaults alert message target and anchor offset
7.Set label width and default control type
8.Set reader for form field
9.Set url for FormPanel
10.Get raw value from form field
11.Set monitorValid = true and monitorPoll = 50
12.By virtue of inheriting from the Ext Container class, an Ext.form.FormPanel can contain any Ext Component.
13.forms can contain TabPanel(s)
14.Use addButton method to add buttons to a FormPanel
15.Titled border for FormPanel
16.Add button for a FormPanel and set Label text