`

extjs基础二

 
阅读更多

一、两种方式创建model类

Ext.define("person",{
extend:"Ext.data.Model",
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
]
});

Ext.regModel("user",{
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
]
});

 

二、实例化

//1、new
var p = new person({
name:"youyang",
age:20
});
//alert(p.get("name"));

//2、create
var u = Ext.create("user",{
name:"youyang",
age:20
});
//alert(u.get("age"));
//3、
var u2 = Ext.ModelManager.create({
name:"youyang",
age:20
},"user");
alert(u2.get("age"));

//得到类名
alert(user.getName());

 

三、数据校验

 

//错误信息汉化
Ext.data.validations.lengthMessage = "错误的长度";

Ext.onReady(function(){

//扩展Ext.data.validations的验证机制
Ext.apply(Ext.data.validations,{
age:function(config, value){
var min = config.min;
var max = config.max;
if(value<min||value>max){
this.ageMessage = this.ageMessage + "它应该在["+min+"~"+max+"]之间"
return false;
}else{
return true;
}
},
ageMessage:'age大小不对'
});
//两种方式创建model类
Ext.define("person",{
extend:"Ext.data.Model",
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
],

validations: [
{type: 'age', field: 'age',min:10,max:150},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['Male', 'Female']},
{type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
{type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
]

});


//实例化
var p = Ext.ModelManager.create({
name:"y",
age:5
},"person");
var errors = p.validate();
var errors2 = [];
//遍历错误信息
errors.each(function(item){
errors2.push(item.field+" "+item.message);
});
alert(errors2.join("\n"));

});

分享到:
评论

相关推荐

    extjs基础教程

    这个基础教程将引导你逐步了解EXTJS的核心概念,包括组件模型、容器模型、布局管理以及事件处理机制。 **1. EXTJS基本概念** EXTJS的核心是其组件模型,它允许开发者创建复杂的用户界面,就像在桌面应用程序中一样...

    ExtJS5 整合Spring4之二

    标题 "ExtJS5 整合Spring4之二" 暗示了这是一个关于将流行的JavaScript框架ExtJS5与Java后端框架Spring4集成的主题。在Web应用开发中,这种集成允许开发者利用ExtJS5的富客户端功能和Spring4的强大后端服务。下面将...

    extjs中三个基础包

    总结起来,EXTJS 的这三个基础包是构建EXTJS 应用的基础,它们共同提供了EXTJS 所需的样式、脚本和环境支持。理解并合理使用这些文件,对于高效、高质量地开发EXTJS 应用至关重要。在深入学习EXTJS 的同时,还应关注...

    EXTJS基础教学实例文档

    以下是对EXTJS基础教学实例文档中提到的一些关键知识点的详细解释: 1. **Ext.MessageBox.alert()**: - `Ext.MessageBox.alert()` 方法用于展示一个简单的警告对话框,包含标题、消息和一个确定按钮。其中,`...

    基础到实战ExtJs全程精通培

    另外,还涉及到ExtJS与Struts 2框架的整合,这对于那些熟悉Java开发的学员来说,是非常实用的技能。 实战项目部分,课程提供了一个个人理财项目,包括用户登录、系统主界面设计、操作面板、用户管理(添加、删除、...

    ExtJs2相关书籍

    《Ext实用简明教程》可能是对ExtJS2的基础知识和常见用法的全面介绍,涵盖了如何使用ExtJS构建用户界面、处理数据、创建组件等内容。读者可以从中学习到如何快速上手ExtJS2,理解其核心概念和API,以及如何将这些...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJS基础及核心框架

    ### ExtJS基础及核心框架知识点 #### 1. ExtJS简介 - **定义**: ExtJS是一种基于JavaScript的前端框架,用于构建丰富的Web应用程序界面。它能够实现RIA(Rich Internet Applications)即富互联网应用,使Web应用...

    extjs 3.4 开发前准备

    3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将详细介绍EXTJS 3.4的开发前准备,包括EXTJS的基本知识、下载、开发环境的搭建以及开发工具的选择。 1. EXTJS 下载与版本结构 EXTJS 3.4...

    extjs 基础入门 1.x与2.x对比轻松学习pdf文档

    ### ExtJS基础知识与1.x至2.x版本对比学习 #### 一、ExtJS简介 ExtJS是一款基于JavaScript的开源框架,用于开发丰富的交互式Web应用程序。它提供了强大的UI组件库,使得开发者能够快速构建高性能、高用户体验的...

    ExtJs 2.2 简明教程 02 基础知识

    在"ExtJs 2.2 简明教程 02 基础知识"中,我们将深入探讨以下关键概念: 1. **程序结构**: ExtJs 的程序结构通常遵循MVC(Model-View-Controller)模式,这是软件设计中的一个重要原则。在MVC中,模型负责处理数据...

    ExtJS基础教程.pdf

    ### ExtJS基础教程知识点概述 #### 一、什么是ExtJS? ExtJS是一个强大的JavaScript库,专为构建富互联网应用程序(RIA)而设计。它由Jack Slocum在2006年初基于Yahoo! UI Library(YUI)进行扩展并命名,随后在...

    EXTJS4自学手册

    一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...

    ExtJS经典皮肤集合

    总的来说,ExtJS经典皮肤集合是开发高质量、美观的Web应用的重要资源,它使得开发者无需从零开始设计界面,而是可以直接利用已有的设计基础,节省时间和精力,专注于业务逻辑和功能实现。通过深入了解和灵活运用这些...

    ExtJs视频教程整包打包

    ExtJs教程视频,下载后txt内为百度云地址及密码,视频包含 ...从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时联系我

    Extjs4.1.1

    Extjs基础入门系列: 第一讲.ExtJs初识及其环境搭建 第二讲.开始ExtJs梦想之旅 第三讲.ExtJS工具栏、菜单栏 第四讲.ExtJS最常用的表单之textfield控件 第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来...

    深入浅出ExtJS第2版(完整版)

    《深入浅出ExtJS第2版(完整版)》作为第二版,不仅更新了ExtJS的最新特性和最佳实践,还加入了大量的实战案例,通过这些案例,读者可以直观地看到如何将理论知识转化为实际开发中的解决方案。相较于第一版,新版在...

    ExtJS2.0教程.chm +Extjs2.2.1压缩包

    这个压缩包包含了关于ExtJS 2.0的教程以及ExtJS 2.2.1的资源,这为我们提供了学习和开发基于ExtJS的应用程序的基础。 `ExtJS2.0教程.chm`:这是一个帮助文件,通常用于提供详细的教程和API参考,帮助开发者了解...

    EXTJS讲解个人项目经历

    2. **启动EXTJS应用**: EXTJS应用通常从`Ext.onReady`函数开始执行,这是因为在DOM加载完成后,EXTJS会调用这个函数。你可以在此函数中定义初始化的代码,例如显示警告消息或者创建UI组件。 3. **创建组件**: ...

Global site tag (gtag.js) - Google Analytics