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
    36,797
    Vote Rating
    834
    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,828
    Vote Rating
    609
    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,828
    Vote Rating
    609
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi