使用dataview元件顯示伺服器端xml檔案資料

php之路發表於2013-12-04
View元件伺服器XML

來自《sencha touch權威指南》，約193頁開始

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

（1）app.js程式碼：

Ext.require(['Ext.data.Store','Ext.data.reader.Xml','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('BookInfo',{
            extend: 'Ext.data.Model',
            config: {
                fields:['image_url','book_name','author','description']
            }
        });

        var bookStore = Ext.create('Ext.data.Store',{
            model: 'BookInfo',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'bookInfo.xml',
                reader: {
                    type: 'xml',
                    record: 'book'
                }
            }
        });

        var bookTemplate = new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="Book_img"><img src="{image_url}" /></div>',
            '<div class="Book_info">',
            '<h2>{book_name}</h2><br /><h3>作者：{author}</h3>',
            '<p>{description:ellipsis(50)}</p>',
            '</div>',
            '</tpl>'
        );

        var dataview = Ext.create('Ext.DataView',{
            store: bookStore,
            itemTpl: bookTemplate,
            baseCls: 'Book',
        });
        
        Ext.Viewport.add(dataview);
    }
});

（2）bookinfo.xml檔案：

<?xml version="1.0" encoding="utf-8"?>
<dataset>
    
<book>
    <id>1</id>
    <image_url>images/21.jpg</image_url>
    <book_name>html5 與css3權威指南</book_name>
    <author>王美麗</author>
    <description>內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面</description>
</book>
<book>
    <id>2</id>
    <image_url>images/22.jpg</image_url>
    <book_name>html5 與css3權威指南</book_name>
    <author>王美麗</author>
    <description>內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面</description>
</book>
<book>
    <id>3</id>
    <image_url>images/23.jpg</image_url>
    <book_name>html5 與css3權威指南</book_name>
    <author>王美麗</author>
    <description>內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面內容系統全面</description>
</book>
</dataset>

 

（3）index.html檔案

<!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">
.Book-item{padding:10px 0 30px 178px;border-top: 1px solid #ccc;}
.Book-item h2{font-weight: bold;}
.Book-item .Book_img{position: absolute;left: 10px;}
.Book-item .Book_img img{max-width: 159px;}
.Book-itme .Book_info{position: absolute;padding-left: 5px;font-size: 12px;}
.x-item-selectex{background-color: blue;color: white;}

</style>
</head>
<body>

</body>
</html>

（4）顯示效果

相關文章