1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default Extjs 4.1 form layout issues

    Extjs 4.1 form layout issues


    hi,

    i have a problem with a basic form layout, here is my code:

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css"/>
            <script type="text/javascript" src="/extjs/ext-all.js"></script>
            <link rel="stylesheet" type="text/css" href="/css/main.css"/>
            <title>Form test</title>
        </head>
        <body>
            <script type="text/javascript">
                Ext.create('Ext.Panel', {
                    width: 500,
                    height: 300,
                    title: "FormLayout Panel",
                    layout: 'form',
                    renderTo: Ext.getBody(),
                    bodyPadding: 5,
                    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'
                        }, {
                            fieldLabel: 'DOB',
                            name: 'dob',
                            xtype: 'datefield'
                        }, {
                            fieldLabel: 'Age',
                            name: 'age',
                            xtype: 'numberfield',
                            minValue: 0,
                            maxValue: 100
                        }, {
                            xtype: 'timefield',
                            fieldLabel: 'Time',
                            name: 'time',
                            minValue: '8:00am',
                            maxValue: '6:00pm'
                        }]
                });
            </script>
        </body>
    </html>
    this is supposed the look like the basic form sample in the documentation:

    http://docs.sencha.com/ext-js/4-1/#!...container.Form

    but instead it looks like the attached screenshot.

    screenshot1.png

    Any help on how can I get it to work properly?

    Thanks

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,085
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please wrap your code in the following and see if it helps.

    Ext.onReady({
    // your JS code
    }) :

    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default


    well, I tried as you answered but yesterday i notice that i have to specify the height and width in pixels in Extjs 4.1 and it works.

Thread Participants: 1

Tags for this Thread