1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    15
    Vote Rating
    0
    arun_v is on a distinguished road

      0  

    Exclamation Errors with forms inside windows (Anchor layout, validation red marks)

    We upgraded from 4.0.7 to 4.1RC3 and we are now having problems with forms. Here is what a sample form inside a window looked like in 4.0.7:

    before.PNG

    after the upgrade, this is what the form looks like:

    after.PNG

    All fields are rendered improperly in some way or another. The only workaround we have found is removing the 'anchor: '100%' parameter from the fields.
    Here is the code for the form:

    Code:
    Ext.define(App.view.TestForm', {    extend: 'Ext.form.Panel',
        alias: 'widget.testform',
        bodyPadding: 10,
        width: 500,
        layout: 'anchor',
        defaultType: 'textfield',
        
        fieldDefaults: {
            msgTarget: 'side',
            anchor: '100%'
        },
        
        items: [{
            xtype: 'combobox',
            name: 'feature',
            fieldLabel: 'Feature',
            store: Ext.create('Ext.data.Store', {
                fields: ['id', 'name'],
                data: [{
                    id: '1', name: 'Test Feature 1'
                }, {
                    id: '2', name: 'Test Feature 2'
                }]
            }),
            displayField: 'name',
            valueField: 'id',
            forceSelection: true,
            allowBlank: false,
            editable: false
        }],
        
        initComponent: function() {
            this.callParent(arguments);
        }
    });
    It is being created after a button click:

    Code:
    xtype: 'button',             
    text: 'Click',
    handler: function() {
        var window = Ext.create('widget.window', {
            modal: true,
            items: [{xtype: 'testform'}]
        });
        window.show();
    }
    Furthermore, the red warning icon that is rendered after field validation is being rendered in a weird place.

    Before, with 4.0.7:

    erbefore.PNG

    After, with 4.1RC3

    erafter.PNG

    Any idea about what is wrong?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,605
    Vote Rating
    754
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default

    On which browsers?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    15
    Vote Rating
    0
    arun_v is on a distinguished road

      0  

    Default

    We could reproduce this in Firefox 11 and Chrome 12 and 20 (we didn't test other versions of chrome or firefox)

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,605
    Vote Rating
    754
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default

    Couldn't reproduce this in Chrome or FF using your code. Is there something else that might be amiss?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Posts
    17
    Vote Rating
    0
    Akeru is on a distinguished road

      0  

    Default

    I had the same kind of issue (http://www.sencha.com/forum/showthre...ave-wrong-size), and as stated clearing Chrome cache fixed it. I guess an old version of the css was still kept somewhere, might be your case too.

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    15
    Vote Rating
    0
    arun_v is on a distinguished road

      0  

    Default

    Thanks. Clearing the cache fixed it. Thank you for your help and consideration.

Thread Participants: 2

Tags for this Thread