display card with sencha touch
I am new to sencha touch and saw all videopodcasts but still don't understand how to "display" a panel from a tabbar (the bar on top!) and how to switch from a panel to another without any slide or something (just display it please!)
There is more on the road like having a preloader and fetch the data from JSON and then display the nested list. But for now I am stuck in this simple scenario...
here is what I have so far...
This is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Sencha 3</title>
<script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/views/startcard.js" type="text/javascript"></script>
<script src="app/views/secondcard.js" type="text/javascript"></script>
<script src="app/views/plain.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
</head><body></body>
app.js
Testdemo = new Ext.Application({
name: "TestDemo",
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('startcard');
}
});
Viewport.js
TestDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'startcard'},
{ xtype: 'secondcard'},
]
});
TestDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
startcard.js
myPrefs = function() {
//here is the problem! How can I display the panel myPrefs??
this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'});
}
refreshHome = function() {
alert("Refresh me!");
}
var somelist = new Ext.Component({
title: 'testline 1',
cls: 'info',
html: 'This is plain Text.<br />Some JSON-Data should be listed here...'
})
TestDemo.views.StartCard = Ext.extend(Ext.Panel, {
title: "TestDemo",
iconCls: "home",
styleHtmlContent: true,
scroll: 'vertical',
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'Some Test App',
items: [
{
iconMask: true,
开发者_如何学Go ui: 'plain',
iconCls: 'settings',
itemId: 'btnHomeMore',
title: 'Do I need a title???',
handler: myPrefs
},
{
xtype: 'spacer'
},
{
iconMask: true,
ui: 'plain',
iconCls: 'refresh',
itemId: 'btnRefreshMe',
title: 'Refresh, i guess',
handler: refreshHome
}
]
}
],
items: [
{
itemId: 'MyStartPage',
html: 'This is just a test'
}
]
});
TestDemo.views.StartCard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('startcard', TestDemo.views.StartCard);
Ok, it isn't exactly clear what the question is from your description so I will try to help with all your points.
With a TabBar you 'display' a panel by making it the active one. By default the first item is displayed.
In ViewPort.js, you will need to add a property 'text' to the items so that the tab has the proper text.
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'startcard', text: 'Start Card'},
{ xtype: 'secondcard', text: 'Second Card'},
]
});
However I don't see your 'secondcard' type defined anywhere so it may be throwing an error. You should load up your page in Chrome/Safari and see if it displays any JS errors using the Developer Console. These errors will prevent behaviour of the components from working properly.
Clicking on the button for that tab will now switch to that card using whatever animation you have configured as the 'cardSwitchAnimation' for the TabBar.
加载中,请稍侯......
精彩评论