`
tmartin
  • 浏览: 104856 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Extjs学习笔记(三) 数据模型model

 
阅读更多

数据集MODEL

类层次图



  @ MODEL概念:

数据模型对真实世界中对事物在系统中的反应   extjs4.0中的mode相当于 DB中的table 或 JAVA 中的Class

 

  @model的创建:

//第一种方式 我们利用Ext.define来创建我们的模型类
		//DB table person(name,age,email)
		Ext.define("person",{
		    //继承
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'int'},
				{name:'email',type:'auto'}
			]
		});
//第二种方式 MVC模式中model一定是M层
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'int'},
				{name:'email',type:'auto'}
			]
		});

 @model的实例:三种方法

		//第一种实例化方式 1.new关键字
		var p = new person({
			name:'uspcat.com',
			age:26,
			email:'yunfengcheng2008@126.com'
		});
		// alert(p.get('name'));
		//第二种实例化方式
		var p1 = Ext.create("person",{
			name:'uspcat.com',
			age:26,
			email:'yunfengcheng2008@126.com'
		});
		//alert(p1.get('age'));
		//第三种实例化方式
		var p2 = Ext.ModelMgr.create({
			name:'uspcat.com',
			age:26,
			email:'yunfengcheng2008@126.com'
		},'person');
		//alert(p2.get('email'));
		//alert(p2.getName());//? class object.getClass.getName 
		alert(person.getName());

 @Validations验证

Ext.data.validations.lengthMessage = "错误的长度";//重定义错误中文提示(汉化)
	Ext.onReady(function(){
	
               //扩展也就是我们自定义验证机制的的一个新的验证方法
		Ext.apply(Ext.data.validations,{
			age:function(config, value){
				var min = config.min;
				var max = config.max;
				if(min <= value && value<=max){
					return true;
				}else{
					this.ageMessage = this.ageMessage+"他的范围应该是["+min+"~"+max+"]";
					return false;
				}
			},
			ageMessage:'age数据出现的了错误'
		});
		
		
		Ext.define("person",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'int'},
				{name:'email',type:'auto'}
			],
			validations:[
				{type:"length",field:"name",min:2,max:6},
				{type:'age',field:"age",min:0,max:150}////age 不能小于0也不能大于150
			]
		});
		var p1 = Ext.create("person",{
			name:'uspcat.com',
			age:-26,
			email:'yunfengcheng2008@126.com'
		});	
		var errors = p1.validate();
		var errorInfo = [];
		errors.each(function(v){
			errorInfo.push(v.field+"  "+v.message);
		});
		alert(errorInfo.join("\n"));
	});	
 

@初识数据代理proxy

person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
	System.out.println(request.getParameter("id"));
	response.getWriter().write("{name:'uspcat.com',age:26,email:'yfc@126.com'}");
%>

 代理JS

Ext.onReady(function(){
		Ext.define("person",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'int'},
				{name:'email',type:'auto'}
			],
			proxy:{
				type:'ajax',
				url:'person.jsp'
			}
		});
		var p = Ext.ModelManager.getModel("person");
		//代理
		p.load(1, {
	        scope: this,
	        failure: function(record, operation) {
	        },
	        success: function(record, operation) {
	        	alert(record.data.name)
	        },
	        callback: function(record, operation) {
	        }
    	});
	})
 

@Molde的一对多和多对一

 

(function(){
	Ext.onReady(function(){
		//类老师
		Ext.regModel("teacher",{
			fideld:[
				{name:'teacherId',type:"int"},
				{name:'name',type:"auto"}
			],
			hasMany:{
				 model: 'student',
			     name : 'getStudent',
       			 filterProperty: 'teacher_Id' //关联字段
			}
		});
		//学生
		Ext.regModel("student",{
			fideld:[
				{name:'studentId',type:"int"},
				{name:'name',type:"auto"},
				{name:"teacher_Id",type:'int'}
			]
		});
		//t.students 得到子类的一个store数据集合,自动变为复数形式。
	})
})();
 

 

 

 

本笔记记于“USPCAT.COM的EXTJS4.0视频教程学习过程”

 

  • 大小: 69.2 KB
分享到:
评论

相关推荐

    extjs 学习心得笔记

    在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...

    extJs+2.1学习笔记.pdf

    本学习笔记将深入探讨ExtJS 2.1的关键概念和技术,帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中,应用程序通常基于组件树构建,每个组件都有自己的属性、方法和事件。理解这种结构对于布局...

    extjs4.0学习笔记

    10. **数据模型(Ext.data.Model)**:定义数据模型,`fields`定义了数据结构,`idProperty`指定主键字段,`Ext.data.Field`用于定义字段的属性,如`name`, `type`, `defaultValue` 和 `mapping`。 11. **数据源(Ext....

    关于ExtJS3.3版本学习笔记

    总体而言,这篇学习笔记和相关资源将帮助读者深入理解ExtJS3.3版本的核心概念,如组件系统、数据绑定、事件处理以及源码解析,同时也能提供对ExtJS 4桌面应用开发的见解,这对于想要扩展知识面或解决特定问题的ExtJS...

    ExtJS笔记---Grid实现后台分页

    - `model`:指定数据模型,定义字段和数据类型。 2. **使用Paging Toolbar**: - Grid通常配合Paging Toolbar使用,它会显示页码和页大小选择器。通过将Paging Toolbar添加到Grid下方,可以方便用户导航和控制...

    Extjs4 MVC开发笔记源码

    在ExtJS 4中,`Ext.data.Model`是数据模型的基础。开发者可以定义模型类,包含字段(fields)和验证规则。模型类通常与服务器端的API接口对应,通过Store进行数据的加载和同步。 2. 视图(View) 视图由`Ext....

    ExtJs5+Spring.Net+MVC项目搭建笔记

    MVC(Model-View-Controller)模式是一种软件设计模式,广泛应用于Web开发,它将应用程序分为三个主要部分:模型(Model)处理数据,视图(View)负责展示,控制器(Controller)协调两者之间的交互。在ASP.NET MVC...

    十分有用有帮助的EXT学习笔记

    Model定义了数据的结构和行为,它是Store中数据的模型。 - **事件处理**: EXT中的组件都支持事件监听,通过绑定事件处理函数,可以响应用户的交互行为,如点击、双击、输入变化等。 - **Grid组件**: Grid是EXT中的...

    ExtJs5+Spring.Net+MVC项目搭建笔记2

    在本篇笔记中,我们将探讨如何使用ExtJS5、Spring.NET和MVC技术来构建一个高效、健壮的Web应用程序。这些技术的结合为开发者提供了强大的前端交互性和后端服务管理能力,使得开发过程更为流畅。 首先,让我们深入...

    一套基于ASP.NET+Extjs技术实现的简单版酒店管理系统

    - **Model(模型层)**:定义了系统中使用的对象及其属性和行为,通常与数据库中的表结构相对应。 - **UI(User Interface,用户界面)**:用户与系统交互的部分,可能由ASP.NET页面和ExtJS组件共同构建,提供直观...

    ExtJS+Web应用程序开发指南

    在实际开发中,PDF文档的形式允许读者随时随地查阅和学习,方便做笔记和查找参考资料。每个章节都可能包含实例代码和详细解释,以便读者能够理论联系实际,通过实践来巩固所学知识。 总结来说,《ExtJS+Web应用程序...

    struts spring ibatis extjs 实例

    这个实例对于学习者来说是一个很好的实践平台,能帮助理解这些框架的协同工作方式,并且可以从中学习如何将它们应用到实际项目中。通过这个实例,开发者可以深入掌握如何将复杂的业务逻辑与前端交互无缝结合,提升...

    extJS初级文档

    通过学习这些资料,你可以逐步掌握ExtJS的基本使用,了解其组件模型,学会如何构建交互丰富的Web应用,并理解其背后的架构设计。记得理论结合实践,多编写代码,这样才能更好地吸收和巩固所学知识。

    Ext-Desktop

    2. `ExtJs 笔记大全.doc`:这可能是一位开发者整理的ExtJS学习笔记,包含了实践经验和技巧,对初学者来说是一份宝贵的参考资料。 3. `掏钱学ExtJs完全版.pdf`:这本书可能详尽地介绍了ExtJS的所有方面,包括基础到...

    grials22D:\keke\grails指南\笔记\1111111.txt,grails 初学者,使用说明的。

    根据提供的文件信息,可以看出这份文档主要涉及Grails框架的基础使用说明。从文件的标题和描述来看,这是一份...对于Grails的学习者来说,了解其基本概念、开发流程以及如何结合其他技术(如ExtJS)是非常有帮助的。

Global site tag (gtag.js) - Google Analytics