来自《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. C语言实现简单的单向链表（创建、插入、删除）及等效STL实现代码

    实现个算法,懒得手写链表,于是用C++的forward_list,没有next()方法感觉很不好使,比如一个对单向链表的最简单功能要求: input: 1 2 5 3 4 output: 1-> ...

  2. 干货：这也许是最全面透彻的一篇RabbitMQ指南！

    本文大纲: RabbitMQ 历史 RabbitMQ 应用场景 RabbitMQ 系统架构 RabbitMQ 基本概念 RabbitMQ 细节阐明 历史-从开始到现在 RabbitMQ是一个Erlan ...

  3. GOF23设计模式之外观模式（facade）

    一.外观模式概述 外观模式也称为门面模式. 核心:为了系统提供统一的入口,封装子系统的复杂性,便于客户端调用. 二.外观模式场景导入与示例代码 场景:要想自己去注册一个公司,首先去工商局检测命名是否合 ...

  4. advapi32.dll kernel32.dll 中的两套注册表API

    日前遇到一件事:WebBrowser中的网页会用到一个“大众”ActiveX控件,为了保证兼容性以及和其它程序互不干扰,我们采用这样一种方案: 1. 我们的软件会自带该控件: 2. 如果系统中已注册有 ...

  5. Zookeeper--Watcher 和 ACL

    Zookeeper--Watcher 和 ACL Watcher (观察) Zookeeper中的znode可以被监控,这是zk的核心特性. 通过exists,getChildren和getData这 ...

  6. java bean 合并

    package com.hainabo.mgcmall.util; import java.beans.BeanInfo;import java.beans.Introspector;import j ...

  7. 解决easyui jQuery JS的for循环调用ajax异步问题

    由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,解决此方法有两种 1.设置ajax参数async为false,即与js同步,默认是true(异步). 这里首先引 ...

  8. 2017百度之星初赛A-1006(HDU-6113)

    思路:在图的外面包一圈'0'字符,然后dfs统计'0'字符的个数和'1'字符的个数.结果如下(num0表示0字符的个数,num1表示1字符的个数): num0 == 1 && num1 ...

  9. node中的require

    /*在node中,可以使用require()函数来加载模块. * require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模块时,在require函 ...

  10. 【转】几款移动跨平台App开发框架比较

    原文地址:https://www.cnblogs.com/songxingzheng/p/6482697.html 整理目前流行的跨平台WebApp开发技术的特点,仅供参考. 每个框架几乎都包含以下特 ...