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 (http://www.sencha.com/forum/showthread.php?156506-Differential-behavior-of-minified-and-debug-source-files).
Here's another tricky situation. Consider the following code:
Script:
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:
<!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.
Here's another tricky situation. Consider the following code:
Script:
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:
<!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.