PDA

View Full Version : [CLOSED] problems about Sencha Touch 1.1.1



neekey
19 Dec 2011, 4:43 AM
Hi! i'm new to Sencha Touch, and found it was very powerful! however, i still encountered some problems. so hope somebody can give help me work these problems out, or show me the right way to code with Sencha, thank you!:)

ISSUE NO.1:

index.php:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SenchaTest</title>
<link rel="stylesheet" href="../sencha-touch-1.1.1/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha-touch-1.1.1/sencha-touch.js"></script>
</head>
<body>


<script type="text/javascript" src="bodyBottom.js"></script>
</body>
</html>


bodyBottom.js:

formPanel = new Ext.TabPanel({
items: [
{
title: 'login',
html: '<p>login</p>',
scroll: 'vertical'
}
],
fullscreen: true
});

formPanel.show();

and this will give me the error:

Uncaught TypeError: Cannot call method 'indexOf' of undefined

ISSUE NO.2:

index.php

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SenchaTest</title>
<link rel="stylesheet" href="../sencha-touch-1.1.1/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha-touch-1.1.1/sencha-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>

index.js


formPanel = new Ext.TabPanel( {
items: [
{
title: 'login',
html: '<p>login</p>',
scroll: 'vertical'
}
],
fullscreen: true
} );

Ext.setup({
onReady: function() {

formPanel.show();
}
});

it work well in desktop browers:
30137

but in iOS or Android, the items don't show up:
30139

if change the formPanel be instanced in onReady, there will be ok.

ISSUE NO.3

index.php

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SenchaTest</title>
<link rel="stylesheet" href="../sencha-touch-1.1.1/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha-touch-1.1.1/sencha-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="wannaBuy.js"></script>
<script type="text/javascript" src="wannaSell.js"></script>
</head>
<body>
</body>
</html>

index.js

(function(){

Ext.namespace( 'Ext.UIS' );

Ext.onReady(function(){

var mainStruct = new Ext.TabPanel( {
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
}
});

mainStruct.add( Ext.UIS.wannaBuy() );
mainStruct.add( Ext.UIS.wannaSell() );
mainStruct.doLayout();

mainStruct.show();
});
})();

wannaBuy.js

(function(){

var wannaBuyConfig = {

title: 'i wanna buy',
html: '<h1>wanna buy</h1>',
iconCls: 'search',
cls: 'card1'
};

Ext.UIS.wannaBuy = function(){

var wannaBuy = new Ext.Panel( wannaBuyConfig );

return wannaBuy;
}
})();

wannaSell.js

(function(){

var wannaSellConfig = {
title: 'i wanna sell',
html: '<h1>wanna sell</h1>',
iconCls: 'organize',
cls: 'card2',
};

Ext.UIS.wannaSell = function(){

var wannaSell = new Ext.Panel( wannaSellConfig );

return wannaSell;
};
})();

it worked but looks werid?
30144

mitchellsimoens
19 Dec 2011, 9:14 AM
My responses:


If you specify fullscreen to true, you don't need to execute show() on it. Not a bug.
Do not create an instance outside of onReady. Also, don't execute show() when using fullscreen as true.
Why are you using add() right after you create the TabPanel? Why not use the items config array? That will take out 2 add() calls and the doLayout() call. Also, don't use show() when using frullscreen as true.

neekey
19 Dec 2011, 5:59 PM
Hi, Mitchell thank you for your response, you pointed:

1. don't execute show() when using fullscreen as true
2. Do not create an instance outside of onReady

very helpful.

the reason why i use add() right after creating the TabPanel is because i want to define this two module( wannaBuy, wannaSell ) in different files. is there any way to achieve this goal ?

and i looked around the examples provided by Sencha Touch 1.1.1, and in example Kitchensink, all components in directory "kitchensink/src/demos/" are defined in different files, and instanced out of onReady(). just wander why it can work well both in desktop browers and mobile browers.