Sencha Touch List And Panel入门

最新推荐文章于 2024-09-14 16:26:17 发布

wuyahuang

最新推荐文章于 2024-09-14 16:26:17 发布

阅读量979

点赞数

分类专栏：移动开发文章标签： list stylesheet function application safari layout

移动开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

首先声明，这个Demo的源码是国外的网站拿过来的，并不是我原创的，下载源代码请访问网址。https://github.com/nelstrom/Sencha-Touch-list-view-demo

下载完了以后，直接用浏览器打开index.html文件就可以访问了。请注意，使用带有WebKit引擎的浏览器访问，比如Google Chrome跟Apple Safari。

接下来看index.html的源代码，<body>标签里面没有任何代码，因为它全部都是靠javascript实现的。

引入Sencha Touch包中自带的JS及CSS文件。
<link rel="stylesheet" href="sencha/1.0.1a/sencha-touch.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen"/>
<script src="sencha/1.0.1a/sencha-touch.js" type="text/javascript" charset="utf-8"></script>

引入两个自定义的JS文件。

<script src="javascripts/index.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/data.js" type="text/javascript" charset="utf-8"></script>

index.js文件。

第一步就是新建一个Application对象。

ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {

}

});

来看Sencha Touch API中对application的描述：Represents a Sencha Application. Most Applications consist of at least the application's name and a launch function，描绘出一个Sencha应用，大多数应用最起码都应该包含应用的名字及运行方法。

第二步新建一个Store对象。

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

ListDemo.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
},
data: [
{ firstName: "Domino", lastName: "Derval" },
{ firstName: "Elektra", lastName: "King" },
{ firstName: "Fiona", lastName: "Volpe" },
{ firstName: "Holly", lastName: "Goodhead" },
{ firstName: "Honey", lastName: "Rider" },
{ firstName: "Jill", lastName: "Masterton" },
{ firstName: "Kissy", lastName: "Suzuki" },
{ firstName: "Mary", lastName: "Goodnight" },
{ firstName: "Miranda", lastName: "Frost" },
{ firstName: "Molly", lastName: "Warmflash" },
{ firstName: "Paula", lastName: "Caplan" },
{ firstName: "Penelope", lastName: "Smallbone" },
{ firstName: "Plenty", lastName: "O'Toole" },
{ firstName: "Pussy", lastName: "Galore" },
{ firstName: "Strawberry", lastName: "Fields" },
{ firstName: "Sylvia", lastName: "Trench" },
{ firstName: "Tatiana", lastName: "Romanova" },
{ firstName: "Tilly", lastName: "Masterton" },
{ firstName: "Vesper", lastName: "Lynd" },
{ firstName: "Xenia", lastName: "Onatopp" }
]
});

先定义一个Model，可以把Store想象成一个大Map，而Model就相当于是定义它的结构。这里它定义了两个参数名，firstName跟lastName，再看Store，第一步就是引入刚才定义的Model，然后是按lastName来排序，getGroupString可以自定义分组规则，record.get('lastName')[0]，按lastName的第一个字母进行分组。最后是自定义的本地数据。这些数据将会显示在List中。当然还需要新建List对象。

第三步新建一个Panel对象。

ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ListDemo.listPanel, ListDemo.detailPanel]
});

fullscreen是否渲染到全屏，layout布局方式有5种，“auto”,''card''，‘’fit‘’，“hbox”，“vbox”，具体的说明请查API，cardSwitchAnimation页面之间切换的动画效果，提供6种效果，“fade”，“slide”，“flip”，“cube”，“pop”，“wipe”。

第四步新建一个List对象。

ListDemo.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListDemo.ListStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
indexBar:true,
onItemDisclosure: function(record, btn, index) {
ListDemo.detailPanel.update(record.data);
ListDemo.Viewport.setActiveItem('detailpanel');
}
});

定义一个id，引入刚才定义的Store，需要渲染的内容都在itemTpl中定义，如果需要List分组的话，grouped设为true，如果需要索引功能的话，定义indexBar为true。最后一个onItemDisclosure如果设为true就是在每一行都显示一个图标，而如果后面直接跟function的话，就自动设为true了。再来看这个function，更新ListDemo的detailPanel组件中的内容，并且让Viewport显示detailPanel，同时隐藏listPanel。

第五步新建一个Panel对象。

ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});

设id为detailpanel，tpl页面渲染的内容，注意这个firstName是List对象中update方法传过来的。最后是添加一个back按钮，同时给这个按钮加上监听器，当被点击时以向右滑动的方式激活Viewport中的disclosurelist，并且隐藏detailpanel。