Results 1 to 2 of 2

Thread: Column layout issue in form panel

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    hyderabad
    Posts
    34

    Default Column layout issue in form panel

    Hi all,


    I have a form panel with some fields and they are arranged in column layout.
    Here the fields are arranged in side by side.
    When i zoom in the browser the fields are being arranged in one after another.
    I am using Ext 4.2.1 and this issue is not raised in Ext 4.0.2 version.

    Here is the code for the form panel.

    Code:
    Ext.create('Ext.panel.Panel', {
        title: 'Column Layout',
        width: 750,
        height: 200,
        layout:'anchor',
        items: [{
                        xtype:'fieldset',
                        title: 'Employee Information',
                        collapsible: true,
                        layout: 'column',
                        items :[{
                            xtype: 'container',
                            columnWidth:.5,
                            items: [{
                                xtype:'textfield',
                                fieldLabel: 'First Name',
                                name: 'firstName',
                            },{
                                xtype:'textfield',
                                fieldLabel: 'Home Phone',
                                name: 'homePhone',
                            },{
                                xtype:'textfield',
                                fieldLabel: 'Work Phone',
                                name: 'workPhone',
                            },{
                                xtype:'textfield',
                                fieldLabel: 'Cell Phone',
                                name: 'cellPhone',
                            }            
                            ]
                        },{
                            xtype: 'container',
                            columnWidth:.5,
                            items: [{
                                xtype:'textfield',
                                fieldLabel: 'Last Name',
                                name: 'lastName',
                            },{
                                xtype:'datefield',
                                fieldLabel: 'Date of Birth',
                                name: 'dateOfBirth',
                                format: 'm/d/Y',
                            },{
                                xtype:'datefield',
                                fieldLabel: 'End Date',
                                name: 'endDate',
                                format: 'm/d/Y',
                            }
                            ]
                        }]
                    }],
        renderTo: Ext.getBody()
    });
    Here are the screen shots the panels.
    panel 1.PNG

    panel 2.PNG

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Hyderabad, India
    Posts
    99
    Answers
    15

    Default

    layout:'anchor',

    Try changing the layout to "hbox" instead of "anchor".

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •