ExtJS与服务端通信
ExtJS的定位是RIA即富客户端
使用ExtJS时需要解决如何与服务端通信的问题。由于ExtJS只是一个客户端的框架,和服务端技术没有关系,也就没有相应的服务端的适配层,因此客户端如果要用ExtJS,则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信:
Ext.Ajax.request做普通的异步请求,服务端可以根据实际情况返回JSON形式数据或者HTML片段
Ext.tree.TreeLoader加载树形结构,服务端必须返回JSON形式数据,而且要符合Ext.tree.TreeNode的配置要求,否则自己做转换
Ext.data.Store及其派生类 加载表格形式的数据,服务端可以根据实际情况返回JSON形式数据或者XML形式数据,如果没有特殊要求,推荐返回JSON格式的数据
Ext.Element.update局部更新,这个方法最终还是要调用Ext.Ajax.request方法,之所以把它单独列出来,是因为这种方式比较容易被忽视,但是在某些情况下还是挺有用的,比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新,如果使用这种方式,那么服务端只能相应的返回HTML片段了
数据的存储机制
EXT数据存储概念 Ext.data(Package)包下
read:数据解析用于读取数据
(ArrayReader ,XmlReader)
record:store中的每条记录流行的中间数据格式xml json
connection此类封装了一个页面到当前域的连接,以响应(来自配置文件中的url或请求时指定的url)请求
简单的store
var store = newExt.data.ArrayStore({
//store configs如果有值传入,那么store的load会自动调用
autoDestroy: true,
storeId: 'myStore',
//reader configs
idIndex: 0,
fields: [
'company',
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
n
/**
EXTjs
基础
n
Ext.get
();
根据
id
得到该对象
n
Ext.select
();
根据标签得到该对象
n
Ext.onReady
();
页面加载会自动执行该方法
n
*
/
n
Ext.onReady
(function()
{
n
/**
n
var
myDiv
=
Ext.get
('
myDiv
');
n
Ext.select
('p').highlight();
n
myDiv.highlight
();
n
myDiv.addClass
('red');
n
myDiv.center
();
//
Center
the
element
in
the
viewport
n
myDiv.setOpacity
(.25);
//
透明度
n
*
/
n
Var
s=fun(
tt
){}
n
//
Ext.get
().on(
事件名,执行的函数
);
n
Ext.get
('
myButton
').on('click',
Ext.get
('
myButton
').
n
n
/**
n
Ext.select
('p').on('click',
function()
{
n
alert("You
clicked
a
paragraph");
n
});
n
//
paragraphClicked
函数方法名
n
var
paragraphClicked
=
function()
{
n
alert("You
clicked
a
paragraph");
n
}
n
Ext.select
('p').on('click',
paragraphClicked
);*/
n
var
paragraphClicked
=
function(e)
{
n
var
paragraph
=
Ext.get
(
e.target
);
//
e.target
得到事件源对象
n
paragraph.highlight
();
案例GridPanel
Ext.MessageBox.show
({
n
Ext.onReady(function(){
var myData = [ //数据源。和myReader格式对应
['Apple',29.89,0.24,0.81,'9/112:00am'],
['Ext',83.81,0.28,0.34,'9/1212:00am'],
['Google',71.72,0.02,0.03,'10/112:00am'],
['Microsoft',52.55,0.01,0.02,'7/412:00am'],
['Yahoo!',29.01,0.42,1.47,'5/2212:00am'],
['科大奥锐!',29.01,0.42,1.47,'5/2212:00am']
];
var myReader = newExt.data.ArrayReader({},[ //读取数据源。和myData一一对应
{name:'company'},
{name: 'price', type:'float'},
{name: 'change', type:'float'},
{name: 'pctChange', type:'float'},
{name: 'lastChange', type: 'date',dateFormat: 'n/j h:ia'}
]);
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
}
Ext.select('p').on('click', paragraphClicked);
});
event:s
;
var grid = newExt.grid.GridPanel({
store: new Ext.data.Store({ //数据装配
data: myData,
reader: myReader
}),
columns: [ //header:显示的标题;width:该列的宽度;sortable:可否排序;dataIndex:数据索引(从data中取)
{header: '公司名称',width: 120, sortable: true, dataIndex: 'company'},
{header: '价格',width: 90, sortable: true, dataIndex: 'price'},
{header: '调价',width: 90, sortable: true, dataIndex: 'change'},
{header: '%调幅',width: 90, sortable: true, dataIndex: 'pctChange'},
{header: '最后更新',width: 120, sortable: true,renderer:Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true //强制适合GridPanel(GridPanel的大小不会改变)。true:没有滚动条;fasle:有滚动条
},
renderTo: 'content', //显示位置(div中的id=“content”)
title: '公司数据预览',//标题
width: 500, //GridPanel的宽度
height:300,
frame: true //GridPanel的边框
});
grid.getSelectionModel().selectFirstRow(); //GridPanel默认选中第一行
Ext与服务器端的交互应用
1.包含表单FormPanel的处理(提交、加载)
(例子:biaodan.htm,load.htm)
2.控件交互(tree.htm,xml方式取值)
3.用户发起的Ajax请求Ext.Ajax.request方法
表单提交(submit)及加载(load)
Ext.onReady(function(){
var f=new Ext.form.FormPanel({
renderTo:“hello”,
title:“用户信息录入框”,
height:200,
width:300,
labelWidth:60,
labelAlign:“right”,
frame:true,
defaults:{xtype:“textfield”,width:180},
items:[
{name:“username”,fieldLabel:“姓名”},
{name:“password”,fieldLabel:“密码 ",inputType:"password"},
{name:"email",fieldLabel:"电子邮件"},
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
],
buttons:[{text:"提交"},{text:"取消"}]
})
});
要提交该表单,直接调用FormPanel下面form对象的submit方法:
f.form.submit({
url:"server.js",
waitTitle:"请稍候",
waitMsg:"正在提交表单数据,请稍候。。。。。。“
});
调用submit方法后,默认服务器端需要返回一个JSON数据对象,该对象包含两个属性,success的值是布尔值true或false,如果success的值为true,则表示服务器端处理成功,否则表示失败;而errors的值是一个对象,对象中每一个属性表示错误的字段名称,属性值为错误描述。
比如,我们有服务器端验证,下面的返回结果表示当表单提交处理出错时给客户端返回的数据。
server.js文件中的内容如下:
server.js文件中的内容如下: {
success: false,
errors: {
username: "姓名不能为空",
times: "迟到次数必须为数字!"
}
}
Ext.Ajax.rquest
( [Object options] ) : Number
例(ajax.htm)
Ext.onReady(function(){
function successFn(response,options){
var obj=Ext.decode(response.responseText) ;//把JSON数据解析成javascript对象可以直接使用Ext.decode方法
alert(obj.username);
}
//通过该对象的responseText或responseXML等属性来得到从服务器端返回的数据信息。
function failureFn(response,options){
alert('请求失败了');
}
Ext.Ajax.request({
url: 'ls.js',
success: successFn,
failure: failureFn,
params: { foo: 'bar' }
});
});
:EXT的ajax提交
Ext.Ajax.request({
//请求地址
url:'login.do',
//提交参数组
params: {
LoginName:Ext.get('LoginName').dom.value,
LoginPassword:Ext.get('LoginPassword').dom.value
},
//成功时回调
success:function(response, options) {
//获取响应的json字符串
varresponseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success==true){
Ext.Msg.alert('恭喜','您已成功登录!');
}else{
Ext.Msg.alert('失败','登录失败,请重新登录');
}
}
});
request方法可以定义Ajax请求的一些属性。参数options是一个对象,options中各个属性及含义如下示:
url String 指定要请求的服务器端url,默认值为Ajax对象中配置的URL参数值。
params Object/String/Function 指定要传递的参数,可以是一个包含参数名称及值的对象,也可以是name=xx&birthday=1978-1-1类似的url编码字符串,或者是一个能返回上述两种内容的函数。
method String 指定发送Ajax请求使用的method,可以是GET或POST方式。默认情况下,如果请求中没有传递任何参数则使用GET,否则使用POST。
callback Function 指定Ajax请求的回调函数,该函数不管是调用成功或失败,都会执行。传递给回调函数的参数有三个,第一个options表示执行request方法时的参数,第二个success表示请求是否成功,第三个参数response表示用来执行Ajax请求的XMLHttpRequest对象。
disableCaching Boolean 是否禁止cache。
headers Object 指定请求的Header信息。
success Function 指当Ajax请求执行成功后执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
failure Function 指定当请求出现错误时执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
scope Object 指定回调函数的作用域,默认为浏览器window。
form Object/String 指定要提交的表单id或表单数据对象。
isUpload Boolean 指定要提交的表单是否是文件上传表单,默认情况下会自动检查。
xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
控件
1.面板
varpanel = new Ext.Panel({
id:'helloworld',
title:'helloworld title',
width:200,
height:300
});
显示面板在id="hello"的div中
panel.render("hello");
2.框架
varviewPort =new Ext.Viewport({
id:'desk',
layout:'border',
items:[{region:'north',height:80},{region:'west',width:200},{region:'center'}]
});
控件实在是太多了代码也太多了 写不下 请参考 ext例子
EXT的学习的网址和博客
http://www.dojochina.com/dojobchina
http://www.ajaxjs.com/基于web表示层的解决方案
http://www.17ext.com/ 一起EXT
http://www.extjs.com/官方