来自《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>

读取mysq数据库l数据,并使用dataview显示的更多相关文章

  1. 读取mysql数据库的数据,转为json格式

    # coding=utf-8 ''' Created on 2016-10-26 @author: Jennifer Project:读取mysql数据库的数据,转为json格式 ''' import ...

  2. AndroidStudio 中查看获取MD5和SHA1值以及如何查看手机应用信息以及读取*.db数据库里面数据

    查看获取MD5和SHA1值具体操作方式链接 查看获取MD5和SHA1值实际操作命令CMD语句: C:\Users\Administrator>cd .android C:\Users\Admin ...

  3. C# 读取Oracle数据库视图数据异常问题处理

    会出现类似现在这种提示的错误 System.Data.OracleClient 需要 Oracle 客户端软件 version 8.1.7 或更高版本 情况1.开发过程中遇到这种问题解决 由于.net ...

  4. wamp中修改后mysq数据库l闪退无法登陆解决办法

    WampServer安装后密码是空的,   修改一般有三种方式:   一是通过phpMyAdmin直接修改:   二是使用WAMP的MySql控制台修改.     三是重置密码    第一种:   1 ...

  5. Excel2003读取sqlserver数据库表数据(图)

  6. Jmeter接口测试,往MySQL数据库写数据时,中文显示???

    调Jmeter接口测试,请求字段输入中文,查看数据库插入情况, 发现数据库显示    ???

  7. 使用python将mysql数据库的数据转换为json数据

    由于产品运营部需要采用第三方个推平台,来推送消息.如果手动一个个键入字段和字段值,容易出错,且非常繁琐,需要将mysql的数据转换为json数据,直接复制即可. 本文将涉及到如何使用Python访问M ...

  8. 利用PHP实现登录与注册功能以及使用PHP读取mysql数据库——以表格形式显示数据

    登录界面 <body><form action="login1.php" method="post"><div>用户名:&l ...

  9. Java读取oracle数据库中blob字段数据文件保存到本地文件(转载)

    转自:https://www.cnblogs.com/forever2698/p/4747349.html package com.bo.test; import java.io.FileOutput ...

随机推荐

  1. 常见企业IT支撑【8、端口回流问题】

    端口回流故障场景,常见于内网启用了Server服务器,使用出口路由设备的外网口NAT映射了一个公网地址,域内内网主机访问了这个公网地址,访问不通. 故障容易出现在办公网内的带有对外Server测试环境 ...

  2. ASP.NET Ajax 客户端框架未能加载、"Sys"未定义

    在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...

  3. Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  4. Java运算符 逻辑运算符 短路运算符

    &      与 两个运算数都为真时结果为真,只要有一个运算数为假结果就为假,否则就为真. true & true = true   true & false = false ...

  5. 安装配置limesurvey

    下载limesurvey地址:http://www.limesurvey.org/en/stable-release 选择下载 limesurvey200plus-build131122.zip 解压 ...

  6. 【BZOJ】1218: [HNOI2003]激光炸弹(前缀和)

    题目 题目描述 输入输出格式 输入格式: 输入文件名为input.txt 输入文件的第一行为正整数n和正整数R,接下来的n行每行有3个正整数,分别表示 xi,yi ,vi . 输出格式: 输出文件名为 ...

  7. Java对象和它的内存管理

    java中的内存管理分为两个方面: 内存分配:指创建java对象时JVM为该对象在堆空间中所分配的内存空间. 内存回收:指java 对象失去引用,变成垃圾时,JVM的垃圾回收机制自动清理该对象,并回收 ...

  8. Julia - 复合表达式

    复合表达式是用一个表达式按照顺序对一系列子表达式求值,并返回最后一个子表达式的值 有两种方法:begin 块和 “;” 链 begin 块 begin 块的多行写法 julia> a = beg ...

  9. 第四章:重构代码[学习Android Studio汉化教程]

    第四章 Refactoring Code The solutions you develop in Android Studio will not always follow a straight p ...

  10. 13.solr学习速成之IK分词器

    IKAnalyzer简介 IKAnalyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包. IKAnalyzer特性 a. 算法采用“正向迭代最细粒度切分算法”,支持细粒度和最大词长两 ...