|
|
|
一、什么是Sencha Touch？
Sencha Touch是一个应用手持移动设备的前端js框架，与extjs是同一个门派的，它继承了extjs的优点和缺点。功能很强大，效果很炫丽，效率不高。
二、例子来了
PS：模拟器访问本地server的地址是10.0.2.2:8080，而不是127.0.0.1:8080
1、导入touch的相关js，css以及资源文件
2、index.HTML
java代码： <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
minimum-scale=1.0;
user-scalable=0;" />
<title>Sencha Touch List Example</title>
<!-- import touch css and js -->
<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="touch/sencha-touch-debug.js"></script><script type="text/javascript" src="src/index.js">
</script>
</head>
<body>
</body>
</html>
复制代码3、index.js
Java代码： /**
* 前言：
* 此例子来自sencha touch的官方example
* 注释用语如有不当请见谅。
*/
//相信这是每个页面都是一样的
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
//注册一个名为“Contact”的模型，显示的字段为firstName和lastName
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
//定义一个对象，有点类似Android里面的BaseAdapter
var groupingBase = {
itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
selModel: {
//选择模型，单选；应该还有多选
mode: 'SINGLE',
allowDeselect: true
},grouped: true,//分组
indexBar: true, //索引栏
//定义点击事件
onItemDisclosure: {
scope: 'test',
//事件处理 32: handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},
//数据仓库
store: new Ext.data.Store({
model: 'Contact',
//与上面注册的模型对应
sorters: 'firstName',//排序字段
//分组title显示的数据源，为firstName的首字母
getGroupString : function(record) {
return record.get('firstName')[0];
},
//就是数据了
data: [
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Zed', lastName: 'Zacharias'}
]
})
};
/**
* 应该是判断设备类型把
* Phone和其他类型有所不同，主要就是屏幕大小了
*/
if (!Ext.is.Phone) {
new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
//全屏
}));
}
}
});
复制代码 |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2011-10-24 09:33:50