Javascript - ExtJs - 数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - ExtJs - 数据相关的知识，希望对你有一定的参考价值。
数据（ExtJs Data）
Ext.data命名空间
有关数据存储、读取的类都定义在Ext.data命名空间中。Ext的gridPanel、combobox的数据源都是来自Ext.data提供的类。该命名空间下的类支持数组、Json和xml数据。
Ext.data.Connection
此类封装了Ajax，提供比传统javascript异步传输数据更为简洁的方法，兼容了所有浏览器。它负责与服务端实现异步交互，并把从服务端的数据转交给Ext.data.Proxy进行处理。
配置.config
//请求的url。
extraParams : Object | String
//请求传递的参数。如果配置在request方法中，此属性要改为params
method : \'GET\' | \'POST\'
//请求的方式。
callback : function
//请求完成后的回调函数，无论是成功还是失败，都会执行。
success : function(response)
//请求成功时的回调函数。
//response：服务端的响应流（代表的就是服务端response对象），通过response.responseText获得服务端传输过来的Json数据
failure : function(response)
//请求失败时的回调函数
//response：服务端的响应流（代表的就是服务端response对象），通过response.responseText获得服务端传输过来的Json数据
scope : Object
//回调函数的作用域。
form : Object | String
//绑定的form表单。
isUpload : bool
//是否执行文件上传。
headers : Object
//请求的头部信息。
xmlData : Object
//XML文档对象，可通过URL附加参数的方式发起请求。
JsonData : Json
//Json对象，可通过URL附加参数的方式发起请求。
disableCaching : bool
//是否禁用缓存，默认禁用。如果设为true则表示在发送GET方式的请求时, 为请求链接添加一个不重复的标识参数以禁用缓存。
timeout : delay
//请求超时的微秒数，默认30秒。
方法.method
//发起请求并接收远程反馈，Ext.data.Connection的配置全部可写在request的配置中，区别在于extraParams要改为params。
abort([TransactionId])
//当同时有多个请求发生时，根据指定的事务id放弃其中的某一个请求。如果不指定事务id，则放弃最后一个请求。
//TransactionId: 事务ID
isLoading([TransactionId])
//根据事务id判断对应的请求是否完成。如果未指定事务id，就判断最后一个请求是否完成。
示例.example
以下代码创建connection实例，并配置好它的各个参数，使用request向服务器发起请求并接收服务端的反馈。
var conn = new Ext.data.Connection();
conn.request({
method: "Get",//请求方式
timeout: 300,//请求超时时间
autoAbort: false,//是否自动断开链接
disableCaching: false,//是否禁用缓存
defaultHeaders: { referer: "http://localhost:54480/" }, //请求的网址的头部
url: "test", //asp.net mvc当前页面所属控制器下的Test方法，如果是其它控制器下的方法，需要填Controller/Action
params: { //请求附带的参数
name: \'sam\'
},
success: function (response) {
//将远程反馈的Json字符解析为Json对象
var m = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("success",m.name);
},
failure: function () {
Ext.Msg.alert("error", "http错误");
}
});
});
服务端
{
string s = $"{{name:\'{name}\'}}";
return s;
}
Ext.data.Model
表示数据模型，可定义字段。此模型与数据库表相关联。如果你要建立自己的数据模型，就需要使你的类从Ext.data.Model派生。其new出的实例就是表的一条记录。你可以按需求设定Ext.data.Model的字段，不需要完全将数据库表的字段都定义在Model中，这要看你从数据库表中查询记录时所返回到客户端的记录中包含了哪些字段，没出现在Ext.data.Model字段中的数据，在客户端就不存在。另外，GridPanel的columns如果是设定为从Ext.data.Model中读取记录，那么即使Ext.data.Model定义了某个字段，但该字段并没出现在GridPanel的columns中，那么GrindPanel就不会显示它，但实际上它依然存在于内存中。最后 注意，Ext.data.Record是Ext.data.Model的一个属性。
创建数据模型
Ext.define("employee", {
extend: "Ext.data.Model",
fields: [
{ name: "employeeName", type: "string", convert: function (value) { /*……convert是可选项，可对字段的值做出判断，可return一个新值*/ } },
{ name: "age", type: "int", convert: null },
{ name: "gender", type: "int" },
{ name: "IsMarried", type: "boolean", defaultValue: true, convert: null }, //defaultValue是可选项
{ name: "favit", type: "auto" } //auto类型表示数组，比如服务端返回的json数据的某个属性是一个数组
]
});
//如果Model的某个字段是一维数组，绑定数据的组件可以直接显示数组内容
//但如果是锯齿数组则需要渲染时指定读取数组的那一层
var column = [
{
text: "喜好",
dataIndex: "favit",
renderer: function () {
return favit[1];
}
}
];
操作记录
extend: "Ext.data.Model",
fields: [
{ name: "employeeID", type: "int" },
{ name: "employeeName", type: "string" }
]
});
var employee = new Employee({
employeeID: 1,
employeeName:"sam"
});
//获取记录
var name = employee.get("employeeName");
var name = employee.data["employeeName"];
var name = employee.data.employeeName;
//修改记录
employee.set("employeeName", "leo");
employee.data["employeeName"] = "leo";
employee.data.employeeName = "leo";
//Ext.data.Model不仅存储了字段的数据，同时还有很多额外的有关数据的信息
//使用get和set访问、修改记录就可以得到这些信息
//比如可以判断字段的值是否与之前不一致，
//不一致将被视为新值，修改值之前它会将旧值取出来存入modified属性中以便你有可能用得上
//而Ext.data.Model的data属性则只存储字段的数据，它不存储额外信息，
//所以推荐使用get和set访问器获取或修改字段。不过data属性自有它的优势，
//当你需要将记录拷贝一份时，data具备简洁的特性，这要比直接拷贝Ext.data.Model要节约资源得多
Model实例方法.method
//提交数据，调用此方法后，会清空modified并将drity设为false。
reject()
//撤销修改，把修改后的数据还原为modified中存储的值，再清空modified并将drity设为false。
getChanges()
//获取修改的数据并包装成Json对象返回。
示例：
//处理表单
Ext.get("saveDataBtn").on("click", function () {
//获取所有数据有被修改过的record
var c = store.getModifiedRecords();
var msg = "";
c.forEach(function (record) {
//被修改过的字段包装成Json返回
//转化为Json字符
var jsonStr=Ext.encode(record.getChanges());
msg += "<br>" + jsonStr + "<br>";
});
Ext.Msg.alert(msg);
})
isModified()
//测试数据是否被修改。
copy()
//忽略drity，将记录拷贝一份，返回与store没有任何关系的Ext.data.Model副本。
save()
//使用代理发起REST请求。服务端会视为这是一个添加记录的请求。
示例：
//创建一条新记录
var stu2 = new Student({
id:2,
name: "korn"
});
stu2.save({
//这有别于connection.request的success，以下参数中的record实际上=operation.responseText
success: function (record, operation) {
serverMsg = Ext.decode(operation.responseText).msg;
Ext.Msg.alert(serverMsg);
}
});
Model静态方法.staticMethod
//id：远程请求时，从远程返回数据时，该数据被看做是本地数据模型的实例，你得配置该实例的id
Json：{
scope: 作用域 ,
failure: function(record, operation) ,
success: function(record, operation)
}
destore()
//使用代理发起REST请求。服务端会视为这是一个删除记录的请求
//示例：
stu.destore({
success: function (record, operation) {
serverMsg = Ext.decode(operation.response.responseText);
Ext.Msg.alert(serverMsg);
}
});
save()
//使用代理发起REST请求。服务端会视为这是一个修改记录的请求
创建模型的代理
大部分情况你可能喜欢在Ext.data.Store中创建代理，但你可以在创建数据模型的同时直接为其创建一个代理。
extend: \'Ext.data.Model\',
fields: [
{ name: \'ID\', type: \'int\' },
{ name: \'name\', type: \'string\' }
],
proxy: {
type: \'ajax\',
format: \'ashx\',
url: \'StudentHandler.ashx\'
}
});
Ext.data.Store
数据交互中介者，它负责对数据进行增、删、改、查 、排序、分组、分页。并将数据提供给gridPanel、treePanel和combobox等组件使用。可以将它视为本地数据库，把Ext.data.Model数组视为表。Ext.data.Store本身是一个空的数据容器，它有两个属性proxy（Ext.data.AjaxProxy）和reader（Ext.data.Reader）。proxy用于在本地或服务端获得数据，reader用于在proxy中读取转化数据为Ext.data.Model数组并存入store中（MixedCollection）。
加载本地数据
加载本地数据需要配置Ext.data.Store对象的两个属性：model和data，model（Ext.data.Model），data（Ext.data.Model数组）。每条记录（Ext.data.Model）都放在data数组里。
Ext.define("Employee", {
extend: "Ext.data.Model",
fields: [
{ name: "employeeID", type: "int" },
{ name: "employeeName", type: "string" },
{ name: "employeeAge", type: "int" },
{ name: "employeeGender", type: "int", convert: function (val) { return val==1?"男":"女" } },
<
以上是关于Javascript - ExtJs - 数据的主要内容，如果未能解决你的问题，请参考以下文章
ExtJS学习-----------Ext.String，ExtJS对javascript中的String的扩展
Javascript/ExtJS：Ext.getCmp('') 导致 TypeError ...不是函数