1. #1
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    122
    Vote Rating
    1
    nbourdeau is on a distinguished road

      0  

    Exclamation how to troublehsoot layout problems in 4.1 B2

    how to troublehsoot layout problems in 4.1 B2


    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 ????

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should use the diag classes then. They are in the src directory.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    122
    Vote Rating
    1
    nbourdeau is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You should use the diag classes then. They are in the src directory.
    Is there any documentation about this ?

  4. #4
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    122
    Vote Rating
    1
    nbourdeau is on a distinguished road

      0  

    Question


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

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,998
    Vote Rating
    649
    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


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    122
    Vote Rating
    1
    nbourdeau is on a distinguished road

      0  

    Question


    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

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,998
    Vote Rating
    649
    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


    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'
            }]
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Touch Premium Member
    Join Date
    Jan 2008
    Location
    Quebec, Canada
    Posts
    122
    Vote Rating
    1
    nbourdeau is on a distinguished road

      0  

    Default


    That works.
    Thank you!

Thread Participants: 2