来自《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. 【SQLYOG】SSH ERROR:UNABLE TO OPEN CONNECTION:GETHOSTBYNAME:UNKNOWN ERROR牵引出来的一系列问题

    出现这个问题很蹊跷,SQLyog管理过一二十台的mysql服务器或者vps,连接一直没有问题,各种服务商的都没问题,也包括阿里云的.可昨天偏偏一台阿里云的服务器本地通过SQLyog去连接它的时候报这样 ...

  2. jeecg中service中注入jdbc的注解

    @Resource private JdbcTemplate jdbcTemplate;

  3. map.js

    function Map() { var struct = function(key, value) { this.key = key; this.value = value; } var put = ...

  4. appium+python自动化34-获取元素属性get_attribute

    获取text # coding:utf-8 from appium import webdriver from time import sleep desired_caps = { 'platform ...

  5. 20165226 2017-2018-4 《Java程序设计》第7周学习总结

    20165226 2017-2018-4 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章 JDBC与MySQL数据库 下载MySQL最新版本. 连接数据库 下载JDBC-M ...

  6. Sqoop修改sqoop元信息实现job的增量导入

    最简单方式是按主键增量导入:http://blog.csdn.net/ggz631047367/article/details/50185319 以下方法只做存档 需求:redis缓存的数据隔段时间往 ...

  7. HTTP请求与响应协议

    HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则 HTTP就是一个通信规则,通信规则规定了客户端发送给服 ...

  8. 【做题记录】USACO gold * 50（第一篇）

    orz xhk 5/50 1597: [Usaco2008 Mar]土地购买 $ f[i]=min(f[j]+x[i]*y[j+1]) $ 然后斜率优化 1699: [Usaco2007 Jan]Ba ...

  9. StringsUtil字符串工具类---灵活截取

    package com.js.ai.modules.pointwall.interfac; import javax.print.attribute.standard.MediaName; publi ...

  10. Docking非原生配体

    转载于 https://mp.weixin.qq.com/s/VDN1qAZGIMol6prwQW4umw Docking非原生配体 在前面的例子中,AutoDock Vina能把配体构象调整到几乎原 ...