0
品牌新煎茶,我想有一個卡在底部是一個旋轉木馬,並且在它的上面,將有文本的開放區域來更新,這取決於圖像被點擊下面的轉盤。任何想法我怎麼能做到這一點?謝謝!Sencha Touch,在同一面板上有文本(空白)區域的傳送帶?
品牌新煎茶,我想有一個卡在底部是一個旋轉木馬,並且在它的上面,將有文本的開放區域來更新,這取決於圖像被點擊下面的轉盤。任何想法我怎麼能做到這一點?謝謝!Sencha Touch,在同一面板上有文本(空白)區域的傳送帶?
我覺得這樣做的工作:
new Ext.Application({
launch: function() {
// DATA
Ext.regModel('MenuItem', {
fields: ['id', 'name']
});
var menuItems = new Ext.data.Store({
model: 'MenuItem',
data: [
{id:1, name:'Page 1'},
{id:2, name:'Page 2'},
{id:3, name:'Page 3'},
{id:4, name:'Page 4'},
{id:5, name:'Page 5'}
]
});
Ext.regModel('PictureItem', {
fields: ['id', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'},
{id:2, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'},
{id:3, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'},
{id:4, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'},
{id:5, url:'http://farm3.static.flickr.com/2303/2508275237_5ecf4b3532.jpg'},
{id:6, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'},
{id:7, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'},
{id:8, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'},
{id:9, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'},
]
});
// UI
var topBar = new Ext.Toolbar({
dock: 'top',
title: 'Ryan\'s layout',
items: [
{text: 'Button 1'},
{text: 'Button 2'}
]
});
var leftList = new Ext.List({
dock: 'left',
width: 135,
itemTpl: '{name}',
singleSelect: true,
store: menuItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
viewport.update(records[0]);
}
}
}
});
var pictureBar = new Ext.Toolbar({
dock: 'bottom',
layout: 'hbox',
scroll: 'horizontal',
height: 100,
defaults: {
cls: 'pic',
height: 80,
width: 120,
},
});
var viewport = new Ext.Panel({
fullscreen: true,
dockedItems: [topBar, pictureBar, leftList],
tpl:'<tpl for=".">{store.model.modelName} {data.id}</tpl>'
});
// BIND IMAGE STORE TO TOOLBAR
pictureItems.each(function (pictureItem) {
pictureBar.add(new Ext.Button({
style:{background: 'url(http://i.tinysrc.mobi/120/80/' + pictureItem.data.url + ')'},
listeners:{
tap: function() {
viewport.update(pictureItem);
}
}
}));
});
pictureBar.doLayout();
}
});
,併產生一個UI是這樣的:http://cl.ly/3vLZ
你堅持哪一部分?你有沒有看過你下載sencha touch時得到的例子?在示例文件夾中,它們是一個稱爲傳送帶的傳送帶,它可以在頁面中爲您提供兩個傳送帶,您可以在其中修改頂部的文本面板。 – carok 2011-01-13 15:16:44