hnhnhnhnhn
- 浏览: 76394 次
-
文章分类
最新评论
-
angryfrank：
收获良多，赞
ExtJS4学习笔记十－－Grid使用 -
万俟辉夜：
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信 ...
ExtJS4学习笔记十－－Grid使用 -
endual：
请问博主，我是用mvc的，请问form.panel怎么绑 ...
ExtJS4学习笔记九－－数据模型的使用 -
365353650：
<%@ page language="java ...
ExtJS4学习笔记九－－数据模型的使用 -
binjoo：
有password类型的文本框??
ExtJS4学习笔记二－－表单控件相关
1、创建Ext.data.Model数据实体模型
2、在模型中进行数据验证
3、在模型中通过代理加载数据
4、模型间的一对多关系
5、模型间的多对一关系
6、Ext.data.proxy.Memory示例
7、Ext.data.proxy.Ajax示例
8、Ext.data.reader.Json示例
9、读取复杂的JSON数据
10、Ext.data.Store示例
11、Ext.data.ArrayStore示例
请问博主，
我是用mvc的，请问form.panel怎么绑定model,
你都是创建一个对象，然后调用方法就进行加载数据的。。。
//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'}
]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
name : 'tom',
age : 24,
phone: '555-555-5555'
}, 'User');
//获取员工姓名
alert(user.get('name'));
2、在模型中进行数据验证
//定义默认的验证提示信息
Ext.data.validations.presenceMessage = '必须是有效值。';
Ext.data.validations.lengthMessage = '长度错误。';
Ext.data.validations.formatMessage = '格式错误。';
Ext.data.validations.inclusionMessage = '没有包括在可接受的数据中。';
Ext.data.validations.exclusionMessage = '不是可接受的值。';
//自定义数值范围验证
Ext.apply(Ext.data.validations,{
number : function(config, value){
if (value === undefined) {
return false;
}
var min = config.min,
max = config.max;
if ((min && value < min) || (max && value > max)) {
return false;
} else {
return true;
}
},
numberMessage : '数值范围错误。'
});
//注册用户数据模型User
Ext.regModel('User', {
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: 'presence', field: 'age'},
{type: 'number', field: 'age', min : 30},
{type: 'length', field: 'name', min: 2},
{type: 'inclusion', field: 'gender', list: ['男', '女']},
{type: 'exclusion', field: 'username', list: ['admin@xx.xx', 'user@xx.xx']},
{type: 'format', field: 'username',
//校验用户名是否为电子邮件格式
matcher: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/
}
]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
name : 'tom',
age : 24,
gender : 'man',
username: 'abc'
}, 'User');
//执行数据验证
var errors = user.validate();
//获取验证信息
var message = [];
errors.each(function(v){
message.push(v.field+' : '+v.message)
});
alert(message.join('\n'));
3、在模型中通过代理加载数据
//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'id', type: 'int'}
],
//配置数据代理
proxy: {
type : 'ajax',
url : 'userServer.jsp'
}
});
var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
success: function(rec) {
alert(rec.get('name'));
}
});<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+userId+", name: 'user"+userId+"'}");
%>
4、模型间的一对多关系
//注册用户数据模型User
Ext.regModel('User', {
fields: [//定义模型字段
{name: 'name', type: 'string'},//用户名称
{name: 'id', type: 'int'}//用户id
],
//User与Product是一对多关系
hasMany: {model: 'Product', name:'getProducts',autoLoad : false},
proxy: {
type : 'ajax',
url : 'userServer.jsp'
}
});
//注册产品数据模型Product
Ext.regModel('Product', {
fields: [//定义模型字段
{name: 'id', type: 'int'},//产品id
{name: 'title', type: 'string'},//产品名称
{name: 'user_id', type: 'int'}//用户id
],
proxy: {
type : 'ajax',
url : 'ProductServer1.jsp',
reader: {
type: 'json',
root: 'products'
}
}
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id为1的User实例
user.load(1, {
success: function(rec) {
//获取user_id为1的产品Store
var products = rec.getProducts();
//加载user_id为1的产品数据
products.load({
callback : function(records, operation, success){
var msg = [];
for(var i = 0; i < records.length; i++){
var rec = records[i];
msg.push('产品名称：'+rec.get('title')+' 用户id：'+rec.get('user_id'));
}
alert(msg.join('\n'));
}
});
}
});ProductServer1.jsp<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>
5、模型间的多对一关系
//注册分类数据模型Category
Ext.regModel('Category', {
fields: [//定义模型字段
{name: 'type', type: 'string'},//产品类型名称
{name: 'id', type: 'int'}//产品类型id
],
proxy: {
type : 'ajax',
url : 'CategoryServer.jsp'
}
});
//注册产品数据模型Product
Ext.regModel('Product', {
fields: [//定义模型字段
{name: 'id', type: 'int'},//产品id
{name: 'title', type: 'string'},//产品名称
{name: 'category_id', type: 'int'}//用户id
],
belongsTo : 'Category'
});
//创建product实例
var product = new Product({
id: 100,
category_id: 1,
title: '产品1'
});
product.getCategory(function(category, operation){
//获取类型名称
alert(category.get('type'));
});<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String categoryId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+categoryId+", type: '产品类型"+categoryId+"'}");
%>
6、Ext.data.proxy.Memory示例
//创建数据模型
Ext.regModel('User', {
fields: ['id','name','age']
});
//定义内存数据变量
var userData = {
users : [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 30 },
{ id: 3, name: '王五', age: 40 }
]
};
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
root: 'users'
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){ //load方法的回调函数
var totalRecords = result.resultSet.total;
alert('读取内存数据，记录总是：'+totalRecords);
}
7、Ext.data.proxy.Ajax示例
//创建数据模型
Ext.regModel('Person', {
fields: ['name','age']
});
//创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
url : 'personServer.jsp',
model: 'Person',
reader: 'json'
});
//创建请求参数对象
var operation = new Ext.data.Operation({
action: 'read'//设置请求动作为read
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
//获取原始响应数据
var responseText = operation.response.responseText;
//获得记录总数
var totalRecords = operation.resultSet.totalRecords;
//获得记录数组
var records = operation.resultSet.records;
alert('使用Ajax代理读取远程数据，记录总是：'+totalRecords);
}<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
response.setContentType("application/json;charset=UTF-8");
String result = "[{name: '张三', age : 20}, {name: '李四', age : 30}]";
response.getWriter().write(result);
%>
8、Ext.data.reader.Json示例
//JSON格式的用户及订单信息
var userData = {
"total" : 2000,
"users": [{
"id": 123,
"name": "张三",
"orders": [{
"id": 50,
"total" : 100
}]
}]
}
//定义用户User模型
Ext.regModel("User", {
fields: [ 'id', 'name' ],
hasMany: 'Order'//定义User与Order之间的一对多关系
});
//定义订单Order模型
Ext.regModel("Order", {
fields: [ 'id', 'total' ],
belongsTo: 'User'//定义Order与User之间的多对一关系
});
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
type: 'json',//Ext.data.reader.Json读取器
root: 'users'
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取总记录数
var count = result.resultSet.total;
//获取第一个用户信息
var user = result.resultSet.records[0];
//获取该用户的第一个账单信息
var order = user.orders().getAt(0);
alert('总记录数：'+count+
'\n姓名：'+user.get('name')+
'\n账单金额：'+order.get('total'));
}
9、读取复杂的JSON数据
//JSON格式的用户及订单信息
var userData = {
"users": [{
"searchDate" : "2011-04-24",//查询时间
"role" : "admin",//查询人角色
"info" : {
"id": 123,
"name": "张三"
}
}]
}
//定义用户User模型
Ext.regModel("User", {
fields: [ 'id', 'name' ]
});
//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
type: 'json',//Ext.data.reader.Json读取器
root: 'users',
record : 'info'//定位有效数据的位置
},
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取第一个用户信息
var user = result.resultSet.records[0];
alert('姓名：'+user.get('name'));
}
10、Ext.data.Store示例
//定义用户User模型
Ext.regModel("User", {
fields: ['name', 'age' ],
proxy: {
type: 'memory'
}
});
//创建数据集对象
var myStore = new Ext.data.Store({
autoLoad: true,
data : [{name: '张三', age : 20},
{name: '李四', age : 30}],
model: 'User'
});
//遍历Store中的记录
var msg = ['遍历Store中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));
11、Ext.data.ArrayStore示例
//定义用户User模型
Ext.regModel("User", {
fields: ['name', 'age' ],
proxy: 'memory'
});
//创建ArrayStore数据集对象
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
data : [['张三',20],['李四',30]],//数组数据
model: 'User'
});
//遍历Store中的记录
var msg = ['遍历ArrayStore中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));
分享到：
评论
2 楼
endual
2012-08-24
请问博主，
我是用mvc的，请问form.panel怎么绑定model,
你都是创建一个对象，然后调用方法就进行加载数据的。。。
1 楼
365353650
2012-07-18
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>
发表评论
-
ExtJS4学习笔记十一 树控件的使用
2011-09-01 16:17 3178一、树面板简单示例 var ... -
ExtJS4学习笔记十－－Grid使用
2011-09-01 15:24 16171一、grid的例： //配置表 ... -
ExtJS4学习笔记八－－Template的使用
2011-09-01 14:21 53821、append方法 var tpl = new Ext.Te ... -
ExtJS4学习笔记七－－事件绑定相关
2011-09-01 11:27 5918一、addListener方法 var button = Ex ... -
ExtJS4学习笔记六－－一些小知识点
2011-09-01 09:31 48871、获取页面上的HTML元素，并进行处理，使用Ext.get( ... -
ExtJS4学习笔记五－－面板使用
2011-08-31 17:06 5476标准面板： Ext.create('Ext.panel.Pan ... -
ExtJS4学习笔记四－－图片上传
2011-08-31 15:51 3944前端程序： <HTML> <HEAD&g ... -
ExtJS4学习笔记三－－远程访问数据源示例
2011-08-31 15:10 3245前端页面： <HTML> <HEAD&g ... -
ExtJS4学习笔记二－－表单控件相关
2011-08-31 14:29 11353二、表单部分相关 <HTML> <HEA ... -
ExtJs4学习笔记一－－基础知识
2011-08-31 11:42 5557开始学习ExtJs4，陆续记录学习过程，希望有所用处： 特别注 ...
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
extjs-theme-bootstrap-master.zip
Extjs 5 学习笔记,在网上下载整理好的。
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
extjs2----关于extjs 的使用，操作.比较初级，但是也比较使用。适合初步接触extjs的朋友
exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net
语言程序设计资料：ExtJs学习笔记-2积分.doc
ExtJs学习笔记，共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
自己总结的extjs4学习笔记，自己总结的extjs4学习笔记，自己总结的extjs4学习笔记，
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架，具有最新的Javascript标准支持 新的漂亮组件和主题，以创建漂亮的企业应用程序 现代工具链，用于构建优化，高性能，通用的应用程序 用于可视...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
NULL 博文链接：https://lucky16.iteye.com/blog/1522254
Extjs4.0学习笔记大全.pdf，供大家学习
JavaScript.-Extjs基础学习笔记