Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: [B3] Fieldset layouts totally broken!

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default [B3] Fieldset layouts totally broken!

    Upgraded to b3. Lots of fieldset layout are completly broken :

    check this basic test case on b2 vs b3 :

    Code:
    
    Ext.define(app.ns + '.element.phoneNumber', {
    
    
        alias: 'widget.phonenumber',
        extend: 'Ext.Container',
    
    
        config: {
            cls: 'x-form-phonenumber',
            layout: 'hbox'
        },
    
    
        initialize: function() {
    
    
            var fieldOptions = [{text: 'mobile', value: 'mobile'}, {text: 'home', value: 'home'}, {text: 'home fax', value: 'home fax'}, {text: 'other', value: 'other'}];
    
    
            this.add([
                {
                    xtype: 'selectfield',
                    name: 'type',
                    options: fieldOptions,
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    name: 'value',
                    input: {type: 'tel'},
                    value: '+33 6 12 34 56 78',
                    placeHolder: 'Phone',
                    clearIcon: true,
                    listeners: {},
                    flex: 3
                }
            ]);
        }
    
    
    });
    
    
    Ext.define(app.ns + '.view.ComplexFieldsetTest', {
    
    
        id: 'complex-fieldset-test',
        alias: 'widget.complex-fieldset-test',
        extend: 'Ext.form.FormPanel',
        requires: [],
    
    
        config: {},
    
    
        initialize: function() {
            this.callParent();
            var self = this;
    
    
            // Add titlebar
            this.add([{
                xtype: 'titlebar',
                title: 'ComplexFieldsetTest'
            }]);
    
    
            // Configure component
            this.add([
                {
                    xtype:'phonenumber'
                }
            ]);
    
    
    
    
        }
    
    
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    You're not using a FieldSet here.

    Also, the select field is taking up 1/4 of the width and the text field taking up 3/4 which is correct.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    I guess he is looking for
    Removed unnecesary vbox layouts from FieldSet and FormPanel to improve performance
    from the release notes.

    Meaning if you use FieldSet or FormPanel, you have to specify the box layout now if you require it.

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default

    This is broken (even with FieldSet xtype), check thoses two shots in latest chrome stable :

    With beta 2 :

    - Capture d’écran 2012-02-17 à 16.39.57.jpg

    With beta 3 :

    Capture d’écran 2012-02-17 à 16.39.51.jpg

    Using xtype fieldset just adds a white background but still broken.

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default

    "specify the box layout now if you require it"

    It means i should use {layout: "box"} ? On the FormPanel ? (i already use {layout: hbox} in my custom fieldset container.)

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    You should use "vbox".

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default

    Not working :

    beta 3 :

    Capture d’écran 2012-02-17 à 16.47.32.jpg

    beta 2 :

    Capture d’écran 2012-02-17 à 16.47.42.jpg

    Using FieldSet xtype for my custome container & vbox for the formpanel layout :

    Code:
    Ext.define(app.ns + '.element.phoneNumber', {
    
    
    
    
        alias: 'widget.phonenumber',
    	extend: 'Ext.form.FieldSet',
    
    
    
    
        config: {
            cls: 'x-form-phonenumber',
            layout: 'hbox'
        },
    
    
    
    
        initialize: function() {
    
    
    
    
            var fieldOptions = [{text: 'mobile', value: 'mobile'}, {text: 'home', value: 'home'}, {text: 'home fax', value: 'home fax'}, {text: 'other', value: 'other'}];
    
    
    
    
            this.add([
                {
                    xtype: 'selectfield',
                    name: 'type',
                    options: fieldOptions,
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    name: 'value',
                    input: {type: 'tel'},
                    value: '+33 6 12 34 56 78',
                    placeHolder: 'Phone',
                    clearIcon: true,
                    listeners: {},
                    flex: 3
                }
            ]);
        }
    
    
    
    
    });
    
    
    
    
    Ext.define(app.ns + '.view.ComplexFieldsetTest', {
    
    
    
    
        id: 'complex-fieldset-test',
        alias: 'widget.complex-fieldset-test',
        extend: 'Ext.form.FormPanel',
        requires: [],
    
    
    
    
        config: {
    		layout: 'vbox'
        },
    
    
    
    
        initialize: function() {
            this.callParent();
            var self = this;
    
    
    
    
            // Add titlebar
            this.add([{
                xtype: 'titlebar',
                title: 'ComplexFieldsetTest'
            }]);
    
    
    
    
            // Configure component
            this.add([
                {
                    xtype:'phonenumber'
                }
            ]);
    
    
    
    
    
    
    
    
        }
    
    
    
    
    });

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Than there are maybe more issues somewhere else. Try to take the time and provide a _fully_ working testcase.

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187

    Default

    Here it is :

    Code:
    window.d = true;
    window.app = {
    	ns: 'MyApp'
    };
    
    
    Ext.application({
    
    
    	name: app.ns,
    	controllers: [],
    	stores: ['ContactList'],
    	//views: ['Viewport'],
    
    
    	launch: function() {
    		d&&console.log(app.ns + '.application#launch', [this, arguments]);
    
    
    		// Create Viewport
    		this.viewport = Ext.create(app.ns + '.view.Viewport');
    	},
    
    
    	getViewport: function() {
    		return this.viewport;
    	}
    
    
    });
    
    
    
    
    Ext.define(app.ns + '.view.Viewport', {
    
    
    	id: 'viewport',
    	extend: 'Ext.Container',
    
    
    	config: {
    		layout: {
    			type: 'card',
    			animation: {type: 'slide'}
    		},
    		fullscreen: true
    	},
    
    
    	initialize: function() {
    		this.callParent();
    		d&&console.log(Ext.getDisplayName(arguments.callee), [this, arguments]);
    
    
    		this.add([
    			{xtype: 'basicfieldset-test'}
    		]);
    
    
    	}
    
    
    });
    
    
    Ext.define(app.ns + '.element.phoneNumber', {
    
    
    
    
        alias: 'widget.phonenumber',
    	extend: 'Ext.form.FieldSet',
    
    
    
    
        config: {
            cls: 'x-form-phonenumber',
            layout: 'hbox'
        },
    
    
    
    
        initialize: function() {
    
    
    
    
            var fieldOptions = [{text: 'mobile', value: 'mobile'}, {text: 'home', value: 'home'}, {text: 'home fax', value: 'home fax'}, {text: 'other', value: 'other'}];
    
    
    
    
            this.add([
                {
                    xtype: 'selectfield',
                    name: 'type',
                    options: fieldOptions,
                    flex: 1
                },
                {
                    xtype: 'textfield',
                    name: 'value',
                    input: {type: 'tel'},
                    value: '+33 6 12 34 56 78',
                    placeHolder: 'Phone',
                    clearIcon: true,
                    listeners: {},
                    flex: 3
                }
            ]);
        }
    
    
    
    
    });
    
    
    
    
    Ext.define(app.ns + '.view.BasicFieldsetTest', {
    
    
    
    
        id: 'basicfieldset-test',
        alias: 'widget.basicfieldset-test',
        extend: 'Ext.form.FormPanel',
        requires: [],
    
    
    
    
        config: {
    		layout: 'vbox'
        },
    
    
    
    
        initialize: function() {
            this.callParent();
            var self = this;
    
    
    
    
            // Add titlebar
            this.add([{
                xtype: 'titlebar',
                title: this.getId() + ' - ' + Ext.version.version
            }]);
    
    
    
    
            // Configure component
            this.add([
                {
                    xtype:'phonenumber'
                }
            ]);
    
    
    
    
    
    
    
    
        }
    
    
    
    
    });

  10. #10
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    There is a strange css rule:


    .x-layout-hbox > .x-layout-box-item {
    width: 0 !important;
    }

    DEV team should definitely look into this.

Page 1 of 2 12 LastLast

Posting Permissions

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