您的位置：首页 > 产品设计 > UI/UE

使用sencha-touch控件制作布局的平板电脑界面

2011-11-02 22:27 375 查看

P.S由于国内twitter上不去，所以没有数据显示

效果如下：

html页面上的js引用：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Pandora</title>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css"/>
<!--<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="touch/sencha-touch-all.js"></script>
<script type="text/javascript" src="app/view/index.js"></script>
</head>
<body>

</body>
</html>

index.js中代码

Ext.application({
name: 'Sencha',

launch: function () {

Ext.regModel('Tweet', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'profile_image_url',
type: 'string'
}, {
name: 'from_user',
type: 'string'
}, {
name: 'text',
type: 'string'
}]
});

var store = new Ext.data.Store({
model: 'Tweet',
proxy: {
url: 'http://search.twitter.com/search.json',
type: 'scripttag',
extraParams: {
rpp: 50,
suppress_response_codes: true
},
reader: {
root: 'results'
}
}
});

store.getProxy().extraParams.q = 'ipad';
store.read();

Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'toolbar',
docked: 'top',
height: 50,
scrollable: {
direction: 'horizontal',
indicators: false
},
items: [
{ ui: 'back', text: 'Back' },
{ text: 'Default' },
{ ui: 'round', text: 'Round' },

{ xtype: 'spacer' },

{
xtype: 'segmentedbutton',
items: [
{ text: 'Option 1' },
{ text: 'Option 2', pressed: true },
{ text: 'Option 3' }
]
},

{ xtype: 'spacer' },

{ ui: 'action', text: 'Action' },
{ ui: 'forward', text: 'Forward' },
{
xtype: 'segmentedbutton',
allowMultiple: true,
items: [
{ text: 'Toggle 1', pressed: true },
{ text: 'Toggle 2', pressed: true },
{ text: 'Toggle 3' }
]
}
]
},
{
xtype: 'list',
disclosure: true,
onItemDisclosure: {
scope: 'test',
handler: function (record, btn, index) {
store.getProxy().extraParams.q = 'ipad';
store.read();
}
},
itemSelector: '.tweet',
tpl: '<tpl for="."><div class="tweet">{id} - {from_user}</div></tpl>',
store: store,
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});

//Ext.Viewport.add(panel);
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： stylesheet string flex action function ui

相关文章推荐

新的分享

章节导航