Differential behavior of minified and debug source files

[r_honey]

I am using Preview 2 and when I put sencha-touch-all.js on the page, my app works fine. But trying to use sencha-touch-all-debug.js produces this error:

Uncaught Error: [ERROR][Ext.ux.TabbedToolBar#getObservableId] Invalid unique id of 'ext-ext.ux.tabbedtoolbar-1' for this object

Well to me the more worrying this is the differential behavior of the minified and debug files rather than the actual error itself. The only thing I do is to append "-debug" to <script> reference and the error pops up.

[r_honey]

And yes, this is an auto generated id (the one in the error message above), so why would Touch first generate an id and later throw error on its own id itself?

[Jamie Avins]

The problem is the periods in your id. Did it throw a warning in the debug code about it?

[r_honey]

The problem is the periods in your id. Did it throw a warning in the debug code about it?

Hi Jamie, did you notice I said it worked with the minified version, but threw error with the -debug.js file (which is contrary to intuition, you would have expected it to work with debug but err out on minified version)?
Also, if you notice the id, its auto-generated by Touch itself (humans would normally choose more meaningful ids )

If needed, I can arrange a remote demo of our app where this issue is seen.

[Jamie Avins]

A reproducible example would be great.

[r_honey]

Hi Jamie, here's the script:

Ext.define('Ext.ux.TabbedToolBar', {
    extend: 'Ext.Toolbar',
    xtype: 'ext.ux.tabbedtoolbar',


    config: {
        scrollable: { direction: 'horizontal', indicators: false },


        layout: {
            type: 'hbox',
            align: 'middle',
            pack: 'center'
        }
    }
});


Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            itemId: 'pnlViewport',
            layout: {
                type: 'card',
                animation: 'scroll'
            },
            items: [
                    {
                        xtype: 'ext.ux.tabbedtoolbar',
                        itemId: 'barModuleButtons',
                        docked: 'bottom',
                        layout: {
                            pack: 'left'
                        },
                        items: [
                            {
                                xtype: 'segmentedbutton',
                                itemId: 'barModuleButtonsParent',
                                items: [
                                    {
                                        xtype: 'button',
                                        iconAlign: 'top',
                                        iconCls: 'home',
                                        iconMask: true,
                                        text: 'Home',
                                        listeners: {
                                            tap: function() {
                                                Portal.ns.pnlViewport.setActiveItem(0);
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        itemId: 'pnlPortalHome',
                        html: 'Dasboard widgets would be shown here'
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'panel',
                                itemId: 'pnlPortalNav',
                                width: 250,
                                type: 'dark',
                                layout: {
                                    type: 'card',
                                    animation: 'scroll'
                                }
                            },
                            {
                                xtype: 'panel',
                                itemId: 'pnlPortalContent',
                                flex: 1,
                                layout: {
                                    type: 'card',
                                    animation: 'scroll'
                                },
                                items: [
                                    {
                                        title: 'File Share',
                                        html: 'File preview or File list goes here'
                                    },
                                    {
                                        title: 'andrew.case',
                                        html: 'Mail preview or Mail list goes here'
                                    },
                                    {
                                        title: 'WorkSite',
                                        html: 'WorkSite document list goes here'
                                    },
                                    {
                                        title: 'SharePoint',
                                        html: 'Folder contents go here'
                                    }
                                ]
                            }
                        ]
                    }
                ]
        });
    }
});

and this is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link type="text/css" rel="Stylesheet" href="../touch/resources/css/sencha-touch.css" />
	<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
	<script type="text/javascript" src="Test.js"></script>
</head>
<body>
</body>
</html>

Notice it would work with sencha-touch-all.js but not with sencha-touch-all-debug.js.

Perhaps it has to be with the dots in the xtype. But then I have 2 concerns here:

1. We are normally accustomed to using dots in xtypes in Ext, its very helpful to avoid naming conflicts when using components/plugins from various sources/vendors.
   I have read that you have disallowed dots for performance. If you are not gonna take back that design decision, then maybe I can replace dots with an underscore.
2. Why would it work with minified but not with debug.

[Jacky Nguyen]

We are normally accustomed to using dots in xtypes in Ext, its very helpful to avoid naming conflicts when using components/plugins from various sources/vendors.
I have read that you have disallowed dots for performance. If you are not gonna take back that design decision, then maybe I can replace dots with an underscore.

Dots are invalid characters for xtypes in Touch 2. One of the main reasons is because xtypes are used in CSS-like selectors throughout the framework, and "." indicates a CSS class name. Hence "foo.bar.baz" won't be understood as a single xtype. Underscores and dashes, however, are perfectly fine.

Why would it work with minified but not with debug.

The debug version has extra code to aid debugging, including warning / error messages to let you know potential problems up front. On the other hand the minified version is meant for production and has all these lines stripped out for maximum performance and smallest possible file size. If you develop with the production version, errors are sometimes "swallowed" without you even notice it. You may not see a hard error thrown right away, but your code won't function properly during run time. As a rule of thumb, always develop with the debug version, and only switch to the production one you when deploy the application.

[r_honey]

Thanks for the details Jacky..
If I recall correctly, I had actually tried replacing dots with underscrores for the xtype, and another error popped up when using minified Touch script. I do not recall the error exactly but I am gonna replace it again and see if I still get that error.

[r_honey]

Oh yes, when I replaced dots with underscores, I got the error that I reported here:
http://www.sencha.com/forum/showthre...xtype&p=717253