使用Sencha Touch加载服务器端数据。

本实例演示了Sencha Touch读取服务器端发来的Json数据。

文档结构如下：

app.js代码如下：

Ext.require(['Ext.form.Panel','Ext.data.Store','Ext.dataview.DataView']);
Ext.application({name:'MyApp',icon:'images/icon.png',glossOnIcon:false,phoneStarupScreen:'images/starUp.png',tabletStartupScreen:'images/tablet.png',launch:function(){Ext.define('User',{extend:'Ext.data.Model',config:{fields:[{name:'id',type:'string'},{name:'name',type:'string'},{name:'img',type:'string'},{name:'age',type:'string'},{name:'url',type:'string'},{name:'email',type:'string'},{name:'info',type:'string'}]}});var userStore=Ext.create('Ext.data.Store',{model:'User',autoLoad:true,proxy:{type:'ajax',url:'ServerDataServlet',reader:{type:'json',rootProperty:'users'}}});var userTemplate = new Ext.XTemplate('<tpl for=".">','<div class="user_img"><img src="{img}" width="50" height="50"/>编号：{id}<br/>姓名：{name}<br/>年龄：{age}<br/>主页：{url}<br/>邮件：{email}<br/>个人信息:{info}</div>','</tpl>');var dataview=Ext.create('Ext.DataView',{store:userStore,itemTpl:userTemplate,listeners:{itemtap:function( ok, index, target, record, e, eOpts){alert(record.get("name"));}}});Ext.Viewport.add(dataview);}
});

服务期端代码ServerDataServlet.java代码如下：

package cn.com.xxxx;import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class ServerDataServlet extends HttpServlet {private String jsonStr="{\"success\":true,\"users\":[{\"id\":\"1\",\"name\":\"zhangsan\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://zahngsan.com\",\"email\":\"waj@163.com\",\"info\":\"a good boy\"},{\"id\":\"2\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"waj@163.com\",\"info\":\"a good boy\"},{\"id\":\"3\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"waj@163.com\",\"info\":\"a good boy\"},{\"id\":\"4\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"waj@163.com\",\"info\":\"a good boy\"},{\"id\":\"5\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"waj@163.com\",\"info\":\"a good boy\"}]}";@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {resp.getOutputStream().print(jsonStr);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {}}

index.html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>index.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="sencha-touch.css"><script type="text/javascript" src="sencha-touch-all-debug.js"></script><script type="text/javascript" src="app.js"></script></head><body></body>
</html>

当然你还要在web.xml中配配置Servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><servlet><servlet-name>ServerDataServlet</servlet-name><servlet-class>cn.com.xxxx.ServerDataServlet</servlet-class></servlet><servlet-mapping><servlet-name>ServerDataServlet</servlet-name><url-pattern>/ServerDataServlet</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list>
</web-app>

本实例使用的是tomcat服务器

演示结果如下：

使用Sencha Touch加载服务器端数据。相关推荐

使用Sencha Touch加载本地Json数据
本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.dat ...
ajax加载远程数据
ajax加载远程数据概述回调函数数据类型发送数据到服务器高级选项实例概述通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, . ...
autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...
Naigos PNP图无法加载最新数据
Naigos PNP图无法加载最新数据前几天IDC断电,设备全部重启,导致nagios pnp图无法正常加载,经过排查发下如下几点状况: 1,查看log日志,并没有报错. 2,npcd没有正常运行, ...
如何显示服务器上excel,如何在HTML中使用OWC正确显示、加载服务器端的excel文件呢？...
如何在HTML中使用OWC正确显示.加载服务器端的excel文件呢? 我的服务器端是unix操作系统,应用是java写的我试了很多方法,都无法将excel在浏览器中以只读的形式显示出来,环境是XP ...
ExtJs TreePanel 不能加载ashx数据的解决办法
今天学习Extjs TreePanel 时在加载动态数据时经常加载不进来,因为我是使用MVC2获取动态数据的,单独调试MVC的返回数据时OK的,网上有很多解决方案,其中最简单的是: loader: n ...
首次使用Cesium加载3D数据不成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/110454547 参阅相关教程:Cesium加载3D数据是通过3D Tiles进行: 3D ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
Android之ListViewJson加载网络数据
使用到的主要内容: 1.Json 解析网络数据 2.异步任务加载图片和数据 3.ListView 的内存空间优化(ConvertView)和运行时间优化(ViewHolder) 4.ListView ...

使用Sencha Touch加载服务器端数据。

使用Sencha Touch加载服务器端数据。相关推荐

最新文章

热门文章