Sencha Touch——TabPanel 中的列表不起作用
所以，我刚刚开始使用 Sencha Touch。我想在 TabPanel 中包含一个列表，但由于某种原因它不起作用。请帮忙。谢谢！
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/rosterData.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"type="text/css" />
<link href="app/myAppStyle.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
JavaScript：
MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {
MyApp.tabbedView= new Ext.TabPanel({
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: "Schedule",
cls: 'card',
iconCls: 'time',
style: "background-color: #000",
},
{
title: "Roster",
layout: 'fit',
cls: 'card',
iconCls: 'team',
xtype: 'list',
store: MyApp.RosterStore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
style: "background-color: #aaa",
},
{
title: "Info",
html: "Bye",
cls: 'card homeScreen',
iconCls: 'info',
style: "background-color: #aaa",
}
]
});
Ext.regModel('PlayerName', {
fields: ['firstName', 'lastName']
});
MyApp.RosterStore= new Ext.data.Store({
model: 'PlayerName',
data: [
{firstName: "Shivam", lastName: "Thapar"},
{firstName: "Last", lastName: "First"},
{firstName: "Bob", lastName: "Smith"}
]
});
MyApp.Viewport= new Ext.Panel({
fullscreen: true,
layout: 'fit',
style: "background-color: #fee",
items: [MyApp.tabbedView]
});
}
});
So, I just started working with Sencha Touch. I want to include a list in a TabPanel but for some reason it isn't working. Please help. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/rosterData.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"type="text/css" />
<link href="app/myAppStyle.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
Javascript:
MyApp=new Ext.Application({
name: 'MyApp',
launch: function() {
MyApp.tabbedView= new Ext.TabPanel({
cardSwitchAnimation: 'slide',
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: "Schedule",
cls: 'card',
iconCls: 'time',
style: "background-color: #000",
},
{
title: "Roster",
layout: 'fit',
cls: 'card',
iconCls: 'team',
xtype: 'list',
store: MyApp.RosterStore,
itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
style: "background-color: #aaa",
},
{
title: "Info",
html: "Bye",
cls: 'card homeScreen',
iconCls: 'info',
style: "background-color: #aaa",
}
]
});
Ext.regModel('PlayerName', {
fields: ['firstName', 'lastName']
});
MyApp.RosterStore= new Ext.data.Store({
model: 'PlayerName',
data: [
{firstName: "Shivam", lastName: "Thapar"},
{firstName: "Last", lastName: "First"},
{firstName: "Bob", lastName: "Smith"}
]
});
MyApp.Viewport= new Ext.Panel({
fullscreen: true,
layout: 'fit',
style: "background-color: #fee",
items: [MyApp.tabbedView]
});
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试将模型和商店定义放在 TabPanel 定义之上。
模型第一
存储下一个
然后是选项卡面板
Try putting your model and store definitions above the TabPanel definition.
Model first
Store next
and then TabPanel