我需要一个简单的嵌套列表视图示例。有点像这样......
http://www.roosteronacid.com/mockup.png
当您点击某个项目时,您将转换(滑动)到包含其他列表的下一个视图/卡片,并在顶部菜单中显示“后退”按钮。依此类推。
列表不一定要有三个级别。我想要一个例子,其中包括一个带有三个子项目的项目,以及一个带您直接进入“最终”视图的项目。
答案 0 :(得分:5)
你应该看看vimeo上的sencha触摸视频。这是一个回答你的问题:
答案 1 :(得分:5)
尝试下面给出的代码,它将帮助您了解使用sencha touch创建嵌套列表的基本功能。
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
dock: 'left',
useTitleAsBackText: true,
title: '',
displayField: 'text',
width: '350',
store: store
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems:[leftNav]
});
}
})
以下链接可帮助您轻松找到更多信息http://dev.sencha.com/deploy/touch/docs/。
另请参阅sencha touch可下载软件包中的示例。
答案 2 :(得分:1)
这很容易做到。查看用户界面示例下Kitchen Sink中的嵌套列表,然后单击“源”按钮查看代码..
答案 3 :(得分:1)
在开始时忽略PhoneGap的内容,this tutorial拥有您需要的大部分内容。
答案 4 :(得分:0)
我采用了不同的方法,使用原始HTML。