Results 1 to 6 of 6

Thread: This is a bug with column layout?

    This issue duplicates another issue.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    22

    Default This is a bug with column layout?

    I generated an application via cmd sencha and changed the main view to show the example / kitchensink / form-multicolumn but my layout is just one column. This is a bug, or what I'm doing wrong in my view?

    printscreen.jpg

    The code of main view is:

    Code:
    /**
     * This class is the main view for the application. It is specified in app.js as the
     * "autoCreateViewport" property. That setting automatically applies the "viewport"
     * plugin to promote that instance of this class to the body element.
     *
     * TODO - Replace this content of this view to suite the needs of your application.
     */
    Ext.define('Authentication2.view.main.Main', {
        extend: 'Ext.form.Panel',
        requires: [
            'Authentication2.view.main.MainController',
            'Authentication2.view.main.MainModel'
        ],
    
    
        xtype: 'app-main',
        
        controller: 'main',
        viewModel: {
            type: 'main'
        },
    
    
         title: 'Multi Column Form',
        frame: true,
        resizable: true,
        minHeight: 200,
    
    
        layout: 'column',
        
        defaults: {
            layout: 'form',
            xtype: 'container',
            defaultType: 'textfield',
            style: 'width: 50%'
        },
    
    
        items: [{
            items: [
                { fieldLabel: 'First Name' },
                { fieldLabel: 'Last Name' },
                { fieldLabel: 'Phone Number' },
                { fieldLabel: 'Email Address' }
            ]
        }, {
            items: [
                { fieldLabel: 'Street Address 1' },
                { fieldLabel: 'Street Address 2' },
                { fieldLabel: 'City, State' },
                { fieldLabel: 'ZIP code' }
            ]
        }],
        
        buttons: [
            { text: 'OK' },
            { text: 'Cancel' }
        ],
       
    
    
        initComponent: function() {
            this.width = 590;
            this.minWidth = 590;
            this.callParent();
        }
    });
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Looks like your xtype needs to be 'form-multicolumn' as in found the example.
    http://dev.sencha.com/ext/5.0.1/exam...rm-multicolumn

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    22

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Looks like your xtype needs to be 'form-multicolumn' as in found the example.
    http://dev.sencha.com/ext/5.0.1/exam...rm-multicolumn
    I think you are wrong. the xtype : 'form-milticolumn' doesn't exits in ext. In this case, is the name of the example view. I still without understand my layout

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Sorry, yes, you're correct -- I must have had something in my eye and definitely misread the code. Taking another look.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Seems to work this way:
    Code:
    Ext.define('Authentication2.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'Authentication2.view.main.MainController',
            'Authentication2.view.main.MainModel'
        ],
    
    
        xtype: 'app-main',
    
    
        controller: 'main',
        viewModel: {
            type: 'main'
        },
    
    
        layout: {
            type: 'border'
        },
    
    
        items: [{
            region: 'center',
            xtype: 'form',
            layout: {
                type: 'column'
            },
            title: 'Multi Column Form',
            frame: true,
            resizable: true,
            minHeight: 200,
            defaults: {
                layout: 'form',
                xtype: 'container',
                defaultType: 'textfield',
                style: 'width: 50%'
            },
            items: [{
                items: [
                    { fieldLabel: 'First Name' },
                    { fieldLabel: 'Last Name' },
                    { fieldLabel: 'Phone Number' },
                    { fieldLabel: 'Email Address' }
                ]
            }, {
                items: [
                    { fieldLabel: 'Street Address 1' },
                    { fieldLabel: 'Street Address 2' },
                    { fieldLabel: 'City, State' },
                    { fieldLabel: 'ZIP code' }
                ]
            }],
            buttons: [
                { text: 'OK' },
                { text: 'Cancel' }
            ],
        }]
    
    
    });

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    22

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    Seems to work this way:
    Code:
    Ext.define('Authentication2.view.main.Main', {
        extend: 'Ext.container.Container',
        requires: [
            'Authentication2.view.main.MainController',
            'Authentication2.view.main.MainModel'
        ],
    
    
        xtype: 'app-main',
    
    
        controller: 'main',
        viewModel: {
            type: 'main'
        },
    
    
        layout: {
            type: 'border'
        },
    
    
        items: [{
            region: 'center',
            xtype: 'form',
            layout: {
                type: 'column'
            },
            title: 'Multi Column Form',
            frame: true,
            resizable: true,
            minHeight: 200,
            defaults: {
                layout: 'form',
                xtype: 'container',
                defaultType: 'textfield',
                style: 'width: 50%'
            },
            items: [{
                items: [
                    { fieldLabel: 'First Name' },
                    { fieldLabel: 'Last Name' },
                    { fieldLabel: 'Phone Number' },
                    { fieldLabel: 'Email Address' }
                ]
            }, {
                items: [
                    { fieldLabel: 'Street Address 1' },
                    { fieldLabel: 'Street Address 2' },
                    { fieldLabel: 'City, State' },
                    { fieldLabel: 'ZIP code' }
                ]
            }],
            buttons: [
                { text: 'OK' },
                { text: 'Cancel' }
            ],
        }]
    
    
    });
    Still the same layout, I had change theme from "classic" to "gray", made a new app build and the layout it's correct. Why this happens with classic theme and not with gray theme? Did you try this view in your machine? thanks

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
  •