Problem with xtype

**r_honey** · 5 Dec 2011 10:27 AM

Something is very wrong at the core of handling "xtype" for custom components in Touch 2. I had earlier reported a problem here.
Here's another tricky situation. Consider the following code:

Script:

Code:

Ext.define('Ext.ux.CustomSheet', {
    extend: 'Ext.Sheet',
    xtype: 'ext.ux.customsheet'
});		




Ext.setup({
    		onReady: function() {
    			Ext.Viewport.add(
				{
					xtype: 'panel',
					layout: 'fit',
					items: [
						{
							xtype: 'toolbar',
							docked: 'top',
							items: [
								{
									xtype: 'button',
									text: 'Click me',
									handler: function() {
										if (!this.sheet) {
											this.sheet = new Ext.ux.CustomSheet({
                        defaults: {
                          xtype: 'button'
                        },
												items: [
													{
                            xtype: 'button',
														text: 'Item 1',
														handler: function() {
															Ext.Msg.alert('', this.getText() + ' clicked.');
														}
													},
													{
                            xtype: 'button',
														text: 'Item 2',
														handler: function() {
															Ext.Msg.alert('', this.getText() + ' clicked.');
														}
													},
													{
                            xtype: 'button',
														text: 'Item 3'
													}
												]
											});
										}
										this.sheet.showBy(this);
									}
								}
							]
						},
						{
							xtype: 'panel'
            }
					]
				});
    		}
    	});

Html:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Box Layouts</title>


	<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">


	<script type="text/javascript" src="../../sencha-touch-all.js"></script>
	<script type="text/javascript" src="box.js"></script>


	<style>
	</style>
</head>
<body></body>
</html>

Please click the toolbar button 2 times in succession. You will notice that the document gets masked (for no apparent reason).

To me, the problem looks like with the dots in xtype for the custom component: Ext.ux.CustomSheet
Okay so, I tried to remove the dots replacing them with an underscore. Guess what, a js error is triggered as soon as I click the toolbar button.
If I eliminate both underscores as well as dots from xtype, I still get js error on clicking the button.

**mitchellsimoens** · 5 Dec 2011 1:21 PM

Thank you for the report.

**Jacky Nguyen** · 18 Jan 2012 9:03 PM

Dots are not valid characters for xtypes in Touch 2, underscores (or dashes) are perfectly fine. I can't re-produce the issue you described with PR3 build when changing your xtype to either "ext_ux_customsheet" or "ext-ux-customsheet".

**Jacky Nguyen** · 18 Jan 2012 9:19 PM

Also see my explanation here.

**r_honey** · 21 Jan 2012 12:26 PM

Okay Jacky, I am gonna test it by replacing with underscors with my current PR 3 code, hopefully it would work fine as you mentioned.

Problem with xtype

Thread Tools

Search Thread

Display

Problem with xtype

Problem with xtype