使用 dataview 元件製作一覽表

php之路發表於2013-12-03
View元件

來自於《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>

 

三、效果顯示：

相關文章