• 使用 dataview 组件制作一览表


    来自于《sencha touch权威指南》第八章,183页左右

    -----------------------------------

    一、app.js代码:

    Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
    Ext.application({
        name: 'MyApp',
        icon: 'images/icon.png',
        glossOnIcon: false,
        phoneStartupScreen: 'images/phone_startup.png',
        tabletStartupScreen: 'images/tablet_startup.png',
        
        launch: function(){
            
            Ext.define('User',{
                extend: 'Ext.data.Model',
                config: {
                    fields: ['firstName','lastName']
                }
            });
    
            var store = Ext.create('Ext.data.Store',{
                model: 'User',
                data: [{
                    firstName:'张三',lastName:''
                },{
                    firstName:'李四',lastName:''
                },{
                    firstName:'昭君',lastName:''
                },{
                    firstName:'龙女',lastName:''
                }]
            });
    
            var panel = Ext.create('Ext.Panel',{
                docked: 'top',
                layout: 'hbox',
                items:[{
                    baseCls: 'title',html:''
                },{
                    baseCls: 'title',html: ''
                }]
            });
    
            var dataview = Ext.create('Ext.DataView',{
                fullscreen: true,
                store: store,
                baseCls: 'user',
                items: [panel],
                itemTpl: '<div>{lastName}</div><div>{firstName}</div>'
            });
            Ext.Viewport.add(dataview);
        }
    });

    二、index.html代码(与以前示例相比,只是多添加了几个css样式)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>sencha touch</title>
    <link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />
    <script type="text/javascript" src="sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <style type="text/css">
    .title{font-size:14px;color:#FFF;text-align: center;background-color: #7088AD;width:50%;}
    .user-item{width: 100%;display: -webkit-box;-webkit-box-orient:horizontal;}
    .user-item div{width: 50%;text-align: center;border-left: solid 1px #7088AD;border-bottom: solid 1px #7088AD;}
    .x-item-selected{background-color:blue;color:white;}
    </style>
    </head>
    <body>
    
    </body>
    </html>

    三、效果显示:

  • 相关阅读:
    浅谈Java中的hashcode方法
    framework
    js 去掉字符串最后一个逗号:笑死我了
    .net MVC4.0项目发布到阿里云虚拟主机中遇到的问题。
    Bootstrap学习第二天轮播插件
    Bootstrap学习第一天
    图灵机器人api的使用方法含微信版本和网页版
    sql.表值类型
    asp.net中的日志添加和未处理异常的记录
    C# 结构类型与类的区别
  • 原文地址:https://www.cnblogs.com/phpway/p/3456743.html
Copyright © 2020-2023  润新知