来自《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. Hibernate学习10——Hibernate 查询方式

    本章主要是以查询Student的例子: Student.java: package com.cy.model; public class Student { private int id; priva ...

  2. Java 打印一个心心

    package Day8_06; public class For { public static void main(String[] args) { System.out.println(&quo ...

  3. [转][c#]注册表经验集

    在 win7 64位的系统中,为了将程序做成绿化版(单EXE文件),一些设置准备放到 regedit(注册表)中. 测试时发现网上的 demo 可以读,但写的值调试不报错,相应位置却不存在,困扰了许久 ...

  4. 关于神经网络算法的 Python例程

    # Back-Propagation Neural Networks# # Written in Python.  See http://www.python.org/# Placed in the ...

  5. Tomcat的文件列表服务

    今天需要将分析后的日志结果发布到网站上供其他人浏览,虽然用户可以通过直接使用url链接可以访问到对应的文件,但是毕竟还是不方便,没有一个类似文件浏览器的东西,可以直接查看文件夹和文件列表. 其实这样的 ...

  6. Java复习——I/O与序列化

    File类 java.io.File只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问,我们可以通过通过给其构造函数传一个路径来构建以文件,传入的路径名有一个小问题,就是Window ...

  7. 【BZOJ】2456 mode（乱搞）

    Description 给你一个n个数的数列,其中某个数出现了超过n div 2次即众数,请你找出那个数. Input 第1行一个正整数n.第2行n个正整数用空格隔开. Output 一行一个正整数表 ...

  8. 在CentOS 7中使用VS Code编译调试C++项目

    1. 安装VSCODE 见VSCode官方链接 https://code.visualstudio.com/docs/setup/linux#_rhel-fedora-and-centos-based ...

  9. React组件间信息传递方式

    组件之间传递信息方式,总体可分为以下5种: 1.(父组件)向(子组件)传递信息 2.(父组件)向更深层的(子组件) 进行传递信息  >>利用(context) 3.(子组件)向(父组件)传 ...

  10. python开发_python中字符串string操作

    在python中,对于字符串string的操作,我们有必要了解一下,这样在我们的以后的开发中会给我们带来很多方便 下面是我学习的笔记: #python-string #python中的字符串用单引号' ...