来自《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. 学习 FPGA之前的基础知识

    在学习一门技术之前往往应该从它的编程语言入手,比如学习单片机时,往往从汇编或者C语言入门.所以不少开始接触FPGA的开发人员,往往是从VHDL或者Verilog开始入手学习的.但小编认为,若能先结合& ...

  2. 以太坊（二）安装Solidity编译器

    官方地址:https://solidity.readthedocs.io/en/develop/installing-solidity.html 推荐使用  remix   快速学习solidity  ...

  3. mysql索引之四：复合索引之最左前缀原理，索引选择性，索引优化策略之前缀索引

    高效使用索引的首要条件是知道什么样的查询会使用到索引,这个问题和B+Tree中的“最左前缀原理”有关,下面通过例子说明最左前缀原理. 一.最左前缀索引 这里先说一下联合索引的概念.MySQL中的索引可 ...

  4. json工具性能比较：json-lib和jackson进行Java对象到json字符串序列化[转]

    网上查找“java json”,发现大家使用最多的还是json-lib来进行java对象的序列化成json对象和反序列化成java对象的操作.但是之前在网上也看到过一往篇关于json序列化性能比较的文 ...

  5. Oracle通过JDBC插入数据时，自增ID如何自动增长

    一.通过触发器的方式 CREATE OR REPLACE TRIGGER tg_test BEFORE INSERT ON Userinfo FOR EACH ROW WHEN (new.userNo ...

  6. 013：Rank、视图、触发器、MySQL内建函数

    一. Rank 给出不同的用户的分数,然后根据分数计算排名 (gcdb@localhost) 09:34:47 [mytest]> create table t_rank(id int,scor ...

  7. rsync之脑袋疼

    rsync图片参考 d本地模式,cp的感觉 vzrtopg = a - d -l --delete适用于2个目录完全一样的情况 默认avz就可以了 2,远端的shell 解决ssh链接慢的问题 3.d ...

  8. 【洛谷】P2434 [SDOI2005]区间（暴力）

    题目描述 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

  9. 论 html与css的关系

    一.网页前端三剑客基础介绍 1-1 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTM ...

  10. 线程之 CPthon中的GIL与Lock的分析与解决办法

    Cpython 中的GIL锁介绍 1. 前戏 In CPython, the global interpreter lock, or GIL, is a mutex that prevents mul ...