讀取mysq資料庫l資料，並使用dataview顯示

php之路發表於2013-12-04
資料庫View

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

通過php指令碼，可以將mysql資料庫的資料作為json資料格式進行讀取。

（1）php程式碼（bookinfo.php)：

<?php
$link = mysql_connect("localhost","root","123456");
mysql_select_db("jiyale");
mysql_query("SET NAMES UTF8");

$result = mysql_query('select * from books',$link);
if(!$result){
    die('{"success":false,"message":"讀取資料失敗"}');
}
if(mysql_num_rows($result)>0){
    while($obj = mysql_fetch_object($result)){
        $arr[] = $obj;
    }
    echo '{"success": true, "books": '.json_encode($arr).'}';
}else{
    echo '{"success": false,"message":"讀取資料失敗","books":""}';
}

?>

（2）app.js程式碼：

Ext.require(['Ext.data.Store','Ext.data.reader.Xml','Ext.dataview.DataView','Ext.MessageBox']);
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.php',
                reader: {
                    type: 'json',
                    rootProperty: 'books'
                }
            },
            listeners: {
                load: function(store,records,successful){
                    if(!successful){
                        Ext.Msg.alert(bookStore.getProxy().getReader().rawData.message);
                    }
                }
            }
        });

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

（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>

 

相關文章