使用sencha touch控件制作list界面

来源:互联网 发布:淘宝上靠谱的泰国代购 编辑:程序博客网 时间:2024/05/01 02:39

显示效果:



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.require([    'Ext.data.Store',    'Ext.List']);Ext.setup({            tabletStartupScreen: 'tablet_startup.png',    phoneStartupScreen: 'phone_startup.png',    icon: 'icon.png',    glossOnIcon: false,    onReady : function() {        Ext.regModel('Contact', {            fields: ['firstName', 'lastName']        });        var groupingBase = {            itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',            selModel: {                mode: 'SINGLE',                allowDeselect: true            },            disclosure: true,            grouped: true,            indexBar: true,            onItemDisclosure: {                scope: 'test',                handler: function(record, btn, index) {                    alert('Disclose more info for ' + record.get('firstName'));                }            },                                    store: Ext.create('Ext.data.Store', {                model: 'Contact',                sorters: 'firstName',                getGroupString : function(record) {                    return record.get('firstName')[0];                },                data: [                    {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: '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: '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: '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: '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: '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: '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: '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: 'Zed', lastName: 'Zacharias'}                ]            })        };        if (!Ext.is.Phone) {            var list = Ext.create('Ext.dataview.List', Ext.apply(groupingBase, {                floating: true,                width: 350,                height: 370,                centered: true,                modal: true,                hideOnMaskTap: false            }));            list.show();        }        else {            Ext.create('Ext.dataview.List', Ext.apply(groupingBase, {                fullscreen: true            }));        }    }});