how to troublehsoot layout problems in 4.1 B2

**nbourdeau** · 20 Feb 2012 10:18 AM

I have a custom field extension which, when placed in a toolbar of a window, makes the layout process crash and leves the window partially rendered. The problem is: there no error message anywhere!!! I have firebug installed ...

How do I troubleshoot this ????

**mitchellsimoens** · 20 Feb 2012 10:24 AM

You should use the diag classes then. They are in the src directory.

**nbourdeau** · 20 Feb 2012 10:27 AM

Originally Posted by mitchellsimoens

You should use the diag classes then. They are in the src directory.

Is there any documentation about this ?

**nbourdeau** · 20 Feb 2012 11:34 AM

Any hint on how to interpret this ?Screenshot at 2012-02-20 14:31:28.jpg

**evant** · 20 Feb 2012 2:07 PM

Not really possible to say without code, however the layout engine has got into a scenario where it has some dependencies it can't resolve.

Try using the page analyzer, it will give you more "interesting" layout info. It's under examples/page-analyzer

**nbourdeau** · 21 Feb 2012 10:27 AM

I made a test as simple as I could.See details below ... I don't see how to troubleshoot this !

Datetime field:

Code:

Ext.define('Progression.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'hbox',
//    width: 200,
//    height: 22,
    combineErrors: true,
    msgTarget :'side',


    dateCfg:{},
    timeCfg:{},


    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield');
        this.timeField = this.down('timefield');
        me.initField();
    },


    //@private
    buildField: function() {
        this.items = [
            Ext.apply({
                xtype: 'datefield',
                format: 'Y-m-d',
                width: 100,
                isFormField: false // prevent submission
            }, this.dateCfg),
            Ext.apply({
                xtype: 'timefield',
                format: 'H:i',
                margin: '0 0 0 3',
                width: 80,
                isFormField: false // prevent submission
            }, this.timeCfg)
        ];
    },


    getValue: function() {
        var value, date = this.dateField.getSubmitValue(), time = this.timeField.getSubmitValue();
        if (date) {
            if (time) {
                var format = this.getFormat();
                value = Ext.Date.parse(date + ' ' + time, format);
            } else {
                value = this.dateField.getValue();
            }
        }
        return value
    },


    setValue: function(value) {
        this.dateField.setValue(value);
        this.timeField.setValue(value);
    },


    getSubmitData: function() {
        var value = this.getValue();
        var format = this.getFormat();
        return value ? Ext.Date.format(value, format) : null;
    },


    getFormat: function() {
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    }


});

Html page to test:

Code:

<html>
<head>


    <link rel="stylesheet" type="text/css" href="/static/ext-4.1.0-beta-2/resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="/static/ext-4.1.0-beta-2/resources/css/ext-all-gray.css"/>
    <script type="text/javascript" src="/static/ext-4.1.0-beta-2/ext-all-dev.js"></script>
    <!--<script type="text/javascript">
        Ext.Loader.setPath('Ext', '/static/ext-4.1.0-beta-2/src');
        Ext.Loader.setPath('Ext.ux', '/static/ext-4.1.0-beta-2/examples/ux');
        Ext.Loader.setPath('Progression', './js');
    </script>-->


    <script type="text/javascript" src="js/ux/form/field/DateTime.js"></script>


    <script type="text/javascript" src="/static/ext-4.1.0-beta-2/src/diag/layout/Context.js"></script>
    <script type="text/javascript" src="/static/ext-4.1.0-beta-2/src/diag/layout/ContextItem.js"></script>


    <script type="text/javascript">
        Ext.onReady(function() {
            var p = Ext.create('Ext.Panel', {
                height: 350,
                width: 600,
                title: 'Test form',
                renderTo: 'test',
                layout: 'fit',
                tbar:       [{
                    id:         'previous',
                    icon:       '/static/icons/16/rewind_16.gif', cls: 'x-btn-icon'
                },{
                    xtype:      'tbtext',
                    text:       'From: '
                },{
                    id:         'fromDate',
                    xtype:      'datetimefield',
                    dateFormat: 'Y-m-d'
                },'-',{
                    xtype:      'tbtext',
                    text:       'To: '
                },{
                    id:         'toDate',
                    xtype:      'datetimefield',
                    dateFormat: 'Y-m-d'
                },{
                    id:         'next',
                    icon:       '/static/icons/16/foward_16.gif', cls: 'x-btn-icon'
                }],
                items: [{
                    html: 'testing one two'
                }],
                buttonAlign: 'center',
                buttons: [{
                    text: 'Close'
                }]
            });
        });
    </script>


</head>
<body>
<div id="test"></div>
</body>
</html>

Page-analyzer result:Screenshot at 2012-02-21 13:24:58.jpg

**evant** · 21 Feb 2012 1:49 PM

Yeah, that shouldn't be failing. In the interim, try this:

Code:

Ext.define('Progression.ux.form.field.DateTime', {
    extend: 'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'fit',
    combineErrors: true,
    msgTarget: 'side',

    dateCfg: {},
    timeCfg: {},

    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield');
        this.timeField = this.down('timefield');
        me.initField();
    },
    //@private
    buildField: function() {
        this.items = {
            layout: 'hbox',
            xtype: 'container',
            items: [Ext.apply({
                xtype: 'datefield',
                format: 'Y-m-d',
                width: 100,
                isFormField: false // prevent submission
            }, this.dateCfg), Ext.apply({
                xtype: 'timefield',
                format: 'H:i',
                margin: '0 0 0 3',
                width: 80,
                isFormField: false // prevent submission
            }, this.timeCfg)]
        };
    },
    getValue: function() {
        var value, date = this.dateField.getSubmitValue(), time = this.timeField.getSubmitValue();
        if(date) {
            if(time) {
                var format = this.getFormat();
                value = Ext.Date.parse(date + ' ' + time, format);
            } else {
                value = this.dateField.getValue();
            }
        }
        return value
    },
    setValue: function(value) {
        this.dateField.setValue(value);
        this.timeField.setValue(value);
    },
    getSubmitData: function() {
        var value = this.getValue();
        var format = this.getFormat();
        return value ? Ext.Date.format(value, format) : null;
    },
    getFormat: function() {
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    }
});

Ext.onReady(function() {
    var p = Ext.create('Ext.Panel', {
        height: 350,
        width: 600,
        title: 'Test form',
        renderTo: document.body,
        layout: 'fit',
        tbar: [{
            id: 'previous',
            icon: '/static/icons/16/rewind_16.gif',
            cls: 'x-btn-icon'
        }, {
            xtype: 'tbtext',
            text: 'From: '
        }, {
            id: 'fromDate',
            xtype: 'datetimefield',
            dateFormat: 'Y-m-d'
        }, '-', {
            xtype: 'tbtext',
            text: 'To: '
        }, {
            id: 'toDate',
            xtype: 'datetimefield',
            dateFormat: 'Y-m-d'
        }, {
            id: 'next',
            icon: '/static/icons/16/foward_16.gif',
            cls: 'x-btn-icon'
        }],
        items: [{
            html: 'testing one two'
        }],
        buttonAlign: 'center',
        buttons: [{
            text: 'Close'
        }]
    });
});

**nbourdeau** · 22 Feb 2012 10:11 AM

That works.
Thank you!

how to troublehsoot layout problems in 4.1 B2

Thread Tools

Search Thread

Display

how to troublehsoot layout problems in 4.1 B2

how to troublehsoot layout problems in 4.1 B2