使用sencha touch控件制作list界面

最新推荐文章于 2024-06-14 09:43:58 发布
最新推荐文章于 2024-06-14 09:43:58 发布
阅读量751 收藏
点赞数 1
文章标签： list stylesheet function class html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoguang44/article/details/6930303
版权

显示效果：



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
            }));
        }
    }
});



CF西西
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用SenchaTouch开发跨平台移动Web应用.doc
12-02
2. 列表组件：Sencha Touch 的列表组件包括分组列表（Grouped List）和嵌套列表（Nested List），非常适合于展示信息较多的情况。 3. 图标和工具栏：Sencha Touch 的图标样式和工具栏布置方式灵活多样，可以满足大...
sencha touch 折叠list
06-21
sencha touch 折叠list
sencha touch(7)——list组件
iteye_8029的博客
12-16 87
1.list组件是一个很强大的组件。用于以一览表的形式或者列表的形式展示应用程序中的大量的数据。该组件使用XTemplate模版来显示数据，同时与数据仓库进行绑定。所以当数据仓库中的数据发生变化的时候，List组件会将这个变化反映在页面上。 Ext.DataView.List组件继承自DataView组件。简单的创建一个list: var myList = Ext.create('Ext....
不是你想像的简单！配置mysql连接方式的时候，localhost和127.0.0.1的区别。
love2377的专栏
10-16 5067
mysql两种连接方式，localhost和127.0.0.1的区别。
sencha touch 2中list控件分组排序
chiju9336的博客
04-07 49
1.首先假设有一张list。 2.初步代码：定义一个数据仓库store，大体如下 3.修改一下，加入排序（sortProperty是一个属性） 4.最后在你显示的list里 加 grouped: true, ...
sencha touch 使用searchfield控件卡顿现象
乔的笔记
09-29 142
最近在sencha项目中做搜索功能时遇到卡顿现象，数据也不多就一百多条 以下是搜索代码 Controller： [code="js"]onSearchKeyp: function(field) { //get the store and the value of the field var value = field.getValue(), ...
sencha touch 获取html中的id,Sencha Touch开发实例：记事本应用(二)
weixin_39708854的博客
06-09 107
在《Sencha Touch开发实例：记事本应用(一)》中, 我们介绍了移动跨平台开发框架Sencha Touch的基本特性,并开始指导大家如何使用Sencha Touch开发一个简单的记事应用,其中讲解了记事页面列表的界面开发和代码。在本文中，将继续讲解如何完善这个记事应用中的记事列表界面的功能。在本文中，期望在学习完后，将会实现第一讲中如下的界面框架，如下图所示：界面框架下面我们分步来进行开发...
使用sencha touch控件显示twitter信息
CF西西的专栏
11-02 882
P.S由于国内twitter上不去，所以没有数据显示 效果如下： html页面上的js引用： Pandora --> index.js中代码 Ext.setup({ onReady: function () { Ext.regModel('Tw
使用sencha-touch控件制作布局的平板电脑界面
CF西西的专栏
11-02 958
P.S由于国内twitter上不去，所以没有数据显示 效果如下： html页面上的js引用： Pandora --> index.js中代码 Ext.application({ name: 'Sencha', launch: fun
sencha touch ：Ext.list 使用方法
OmelasShell的专栏
06-29 886
var list = new Ext.List({ id: 'myList', floating: true,//设置此属性后才可以使用 height width width: 250, height: 200, fullscreed:true,//全屏显示 dock: 'left', //显示的位置
使用Sencha Touch开发移动Web应用平台
csnewdn的专栏
11-01 714
http://www.cnblogs.com/gzggyy/archive/2013/04/10/3011950.html Sencha Touch 是由 Sencha 公司开发的移动 Web 应用开发框架，用以提升主流移动设备在浏览器上的触碰操作，增强用户体验。该框架以久负盛名的 Ext JS 富客户端框架为基础，并支持最新的 HTML5 及 CSS3 标准，与流行的 Apple iOS
sencha touch 登陆界面
03-23
对初涉st的学者来说很有帮助，让你能了解st的三层架构，能让你更清晰的读懂代码。
Material-Controls-for-Sencha-Touch:使用 Sencha Touch 的控件集合
07-16
Sencha Touch 的 Material Design 控件该项目希望使用指南的外观和感觉创建易于使用的 Sencha Touch 控件。 请随时提出任何拉取请求。元件清单 按钮 文本域 进步 选择 滑块 切换 标签栏 列表 消息框 复选框 日期选择...
C#——集合List
qq_3517289697的博客
06-11 658
list集合和Arraylist基本一样，只不过list是C#2.0版本新加入的范型类型。list也可以通过索引操作里面的元素，也有对list进行增删改查。
list模拟与实现（附源码）
Giggins GaoBlog
06-08 1150
在学习STL时，一定要先阅读C++文档list使用文档list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代list的底层是双向链表结构，双向链表中每个元素存储在互不相关的独立节点中，在节点中通过指针指向其前一个元素和后一个元素。list与forward_list非常相似：最主要的不同在于forward_list是单链表，只能朝前迭代，已让其更简单高效。
ArrayList和LinkedList的区别！！！
qq_64847107的博客
06-11 487
ArrayList：动态数组。LinkedList：双向链表。
Java中List流式转换为Map的终极指南
最新发布
木头大左的博客
06-14 390
哈喽，大家好，我是木头左！在Java编程中，经常需要将一个List对象转换为另一个Map对象。这可能是因为需要根据List中的元素的某些属性来创建一个新的键值对集合。在本文中，我将向您展示如何使用Java 中的流式API轻松地实现这一目标。
LinkedList与链表
m0_63562631的博客
06-11 1057
链表是一种物理存储结构上非连续存储结构，数据元素的逻辑顺序是通过链表中的引用链接次序实现的。结构简单，一般不会单独用来存数据。实际中更多是作为其他数据结构的子结构，如 哈希桶、图的邻接表等等。另外这种结构在笔试面试中出现很多。在Java的集合框架库中LinkedList底层实现就是无头双向循环链表。
senchatouch
09-15
开发者可以使用Sencha Touch构建在iPhone、Android和BlackBerry等设备上运行的移动web应用，其效果看起来就像本地应用一样。目前，Sencha Touch已经成为构建移动HTML5应用的领先框架之一。 如果你想学习如何使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值