来自《sencha touch权威指南》第11章，323页开始

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

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="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript" src="app.js"></script>

<style type="text/css">

h3{background: blue;font-size: 14px;color:black;font-weight: bold;width:180px;border: solid 1px blue;background-color: skyblue;border-radius:20px;padding: 5px;}

.listHeader{display: -webkit-box;-webkit-box-orient: horicontal;}

.title{font-size: 14px;color: #FFF;text-align: center;background-color: #7088ab;width: 25%;}

.students div{width: 25%;text-align: center;border: solid 1px #ccc;float: left;}

.class{clear:left;}

</style>

</head>

<body>

</body>

</html>

app.js代码：

Ext.require(['Ext.DataView','Ext.TitleBar','Ext.Toolbar','Ext.Panel']);

Ext.application({

    name: 'MyApp',

    icon: 'images/icon.png',

    glossOnIcon: false,

    phoneStartupScreen: 'images/phone_startup.png',

    tabletStartupScreen: 'images/tablet_startup.png',

    launch: function(){

        Ext.define('Class',{

            extend: 'Ext.data.Model',

            config: {

                fields: ['id','name','studentCount'],

                hasMany:{

                    model: 'Student',name: 'students'

                },

                proxy:{

                    type: 'ajax', url: 'students.json'

                }

            }

        });

        Ext.define('Student',{

            extend: 'Ext.data.Model',

            config: {

                fields: ['number','name','age','phone']

            }

        });

        var template = new Ext.XTemplate(

            '<div class="class"><h3>{name}(学生人数：{studentCount})</h3>',

            '<div class="listHeader">',

                '<div class="title">姓名</div>',

                '<div class="title">学号</div>',

                '<div class="title">年龄</div>',

                '<div class="title">电话</div>',

            '</div>',

            '<tpl for="students">',

            '<div class="students">',

                '<div id="name">{name}</div>',

                '<div>{number}</div>',

                '<div>{age}</div>',

                '<div>{phone}</div>',

            '</div></tpl></div>'

        );

        var titlebar = Ext.create('Ext.TitleBar',{

            docked: 'top',

            title: '北京大学'

        });

        var dataview = Ext.create('Ext.DataView',{

            items: titlebar,

            itemTpl: template,

            selectedCls: 'selected',

            store: new Ext.data.Store({

                model: 'Class',

                autoLoad: true

            })

        });

        Ext.Viewport.add(dataview);

    }

});

students.json代码：

[

{

    "id": 1,

    "name": "2002级1班",

    "studentCount":3,

    "students":[

        {"number":"0802123","name":"张三","age":30,"phone":"0102222"},

        {"number":"0802124","name":"梁二","age":30,"phone":"0102233"},

        {"number":"0802128","name":"陈八","age":30,"phone":"0102255"}

    ]

},

{

    "id": 2,

    "name": "2002级2班",

    "studentCount":2,

    "students":[

        {"number":"0803111","name":"张三","age":20,"phone":"0202222"},

        {"number":"0803222","name":"梁二","age":20,"phone":"0202233"}

    ]

}

]

显示结果：

Ext.data.association.hasMany一对多模型使用示例的更多相关文章

  1. ExtJS笔记 Ext.data.Model

    A Model represents some object that your application manages. For example, one might define a Model ...

  2. ExtJS笔记 Ext.data.Types

    This is a static class containing the system-supplied data types which may be given to a Field. Type ...

  3. 多目标跟踪笔记三：Global Data Association for Multi-Object Tracking Using Network Flows

    Abstract 针对用于多目标跟踪的数据关联(data association),本文提出了一种基于网络流(network flow)的优化方法.将最大后验概率(maximum-a-posterio ...

  4. A Hybrid Data Association Framework for Robust Online Multi-Object Tracking（2017 IEEE Transactions on Image Processing）

    A Hybrid Data Association Framework for Robust Online Multi-Object Tracking 一种用于鲁棒在线多目标跟踪的混合数据关联框架 摘 ...

  5. Ext.data.SimpleStore的使用方法

    Ext.data.SimpleStore简单数据存储器 参数:data:Array数组类型.fields:数组对应的字段名称.var data1=[1,"订单1","16 ...

  6. Ext.data.Store动态修改url

    store.proxy = new Ext.data.HttpProxy({url:path}); 示例: var ad_store = new Ext.data.JsonStore({ fields ...

  7. 设置 Ext.data.Store 传参的请求方式

    设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...

  8. Ext.data.Store添加动态参数

    多条件查询页面的参数都是动态的,并且我们通常还会有默认加载页面.此时,动态添加参数非常重要,其中baseparam是解决问题的关键. @ 将查询条件定义为一个全局变量 var param_01 = & ...

  9. 转： Ext.data.Store 修改Post请求

    Extjs 4.0版本 var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称' ...

随机推荐

  1. (转)Inno Setup入门（三）——指定压缩方式

    本文转载自:http://blog.csdn.net/augusdi/article/details/8564796 Setup段中的compression指定了采用的压缩方式,较高的压缩率需要较多的 ...

  2. 阻塞队列之一：BlockingQueue汇总

    一.阻塞队列介绍 BlockingQueue 通常用于一个线程生产对象,而另外一个线程消费这些对象的场景.下图是对这个原理的阐述: 一个线程往里边放,另外一个线程从里边取的一个 BlockingQue ...

  3. java6枚举类型

    java.lang.Enum > 使用enum定义. 类如: public class EnumDemo { enum Edge { TOP, BOTTOM, LEFT, RIGHT//定义了一 ...

  4. Hibernate 一对一、一对多、多对多注解cascade属性的总结

    作用:是否级联被注解字段里面的对象.可选值:javax.persistence.CascadeType.PERSIST, MERGE, REMOVE, REFRESH, DETACH, ALL.可选其 ...

  5. [转]第一次使用Android Studio时你应该知道的一切配置（三）：gradle项目构建

    目录: 1.gradle的概念 2.gradle配置jar包,和libs文件夹导入jar包的区别 3.签名打包: (1)Studio (2)命令行 (3)gradle wrapper的原理 4.Bui ...

  6. mysql数据安全一之数据恢复案例

    mysql数据安全一之数据恢复案例 --chenjianwen 应用场景:适宜开启binlog 日志功能,定时备份并使用--master-data参数备份,在某个时间点丢失数据,用于数据恢复 开篇总结 ...

  7. sgdisk基本用法

    简介 sgdisk是Linux下操作GPT分区的工具,就像fdisk是操作MBR分区的工具.关于GPT和MBR的区别请参考: http://www.anchor.com.au/blog/2012/10 ...

  8. SpringBoot起步依赖和自动配置

    一.起步依赖 1. 是什么 本质上是一个Maven项目对象模型(Project Object Model, POM), 定义了对其他库的传递依赖,这些东西加在一起即支持某项功能. 比如: spring ...

  9. 跟我一起学kafka（二）

    kafka安装到linux服务器中的情况较多,但是我们现在在学习当中,所以可以拿windows先试试手.要想学kafk那么必然要做一件事就是安装好kafka,下面我讲详细得windows下安装kafk ...

  10. vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...