Results 1 to 2 of 2

Thread: Baffled by forms layout. Fields not displaying labels.

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2015
    Posts
    1

    Default Baffled by forms layout. Fields not displaying labels.

    I am putting together what should be a pretty simple dialog that has two displayfields, two timefields, and a button.

    In order to get the layout looking close to what I want, I've embedded containers in the FormPanel. However, when the page is rendered none of the fieldsLabels are shown in the dialog. I'm including the code and, hopefully, a screenshot.

    Code:
    Ext.onReady(function() {
    
        Ext.BLANK_IMAGE_URL = "/ext/resources/images/default/s.gif";
    
        Ext.Ajax.timeout = 60000;
    
        Ext.QuickTips.init();
    
        Ext.get('loading').remove();
    
        var form = new Ext.form.FormPanel({
            applyTo: 'wee-panel-div',
            bodyStyle: {
                background: '#ffffff',
                padding: '5px'
            },
            frame: true,
            id: 'wee-record-acm-form',
            monitorValid: true,
            style: 'margin: 20px auto;',
            title: 'After-hours Time Window',
            width: 650,
            height: 400,
            hidelabels: 'false',
            layout: 'vbox',
            layoutConfig: {
                align: 'stretch'
            },
            items: [{
                xtype: 'container',
                flex: 1,
                id: 'upperContainer',
                layout: 'vbox',
                layoutConfig: {
                    align: 'stretch',
                    pack: 'center'
                },
                items: [{
                    xtype: 'displayfield',
                    id: 'currentStart',
                    fieldLabel: 'Current after-hours start time',
                    labelAlign: 'right',
                    labelWidth: 175,
                    value: '00:00'
                }, {
                    xtype: 'displayfield',
                    id: 'currentStop',
                    fieldLabel: 'Current after-hours stop time',
                    labelAlign: 'right',
                    labelWidth: 175,
                    value: '00:00'
                }]
            }, {
                xtype: 'container',
                flex: 1,
                id: 'lowerContainer',
                //                    width: 100,
                layout: 'hbox',
                layouConfig: {
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    flex: 1,
                    height: 50,
                    width: 100,
                    layout: 'vbox',
                    layoutConfig: {
                        align: 'stretch',
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'timefield',
                        id: 'newStartTime',
                        width: 216,
                        fieldLabel: 'New after-hours start time',
                        labelAlign: 'right',
                        labelWidth: 150,
                        format: 'H:i',
                        submitFormat: 'Hi'
                    }, {
                        xtype: 'timefield',
                        id: 'newStopTime',
                        width: 216,
                        fieldLabel: 'New after-hours stop time',
                        labelAlign: 'right',
                        labelWidth: 150,
                        format: 'H:i',
                        submitFormat: 'Hi'
                    }, {
                        xtype: 'label',
                        flex: 1,
                        text: 'Time must be entered in 24-hour format.'
                    }]
                }, {
                    xtype: 'container',
                    flex: 1,
                    autoEl: 'div',
                    layout: 'hbox',
                    layoutConfig: {
                        align: 'middle',
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        id: 'submitButton',
                        text: 'Submit'
                    }]
                }]
            }]
        });
    
    });
    Screenshot_2015-06-26_10-13-29.png

  2. #2
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    You changed the layout to vbox only the form layout will display the labels correctly.

    Try wrapping a displayfield with a container using the layout: 'form' and the label should show up.

Similar Threads

  1. Replies: 1
    Last Post: 7 Nov 2012, 8:32 AM
  2. Forms in card layout not displaying correctly
    By forumuser1080 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Apr 2011, 11:32 AM
  3. Field labels not displaying when inside of a column layout...
    By zhegwood in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 22 Jan 2009, 7:42 AM
  4. labels on forms
    By tprscott in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 6 Sep 2007, 10:30 AM

Tags for this Thread

Posting Permissions

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