简单的Ext.Ajax. request示例
var requestConfig = {
url :'loginServer.jsp',//请求的服务器地址
params : {userName : 'tom',password : '123'},//请求参数
customer : '自定义属性',//附加属性
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText,
"本地自定义属性：",options.customer];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
Ext.Ajax表单提交示例
var requestConfig = {
url :'loginServer.jsp',//请求的服务器地址
form : 'loginForm',//指定要提交的表单id
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
Ext.Ajax. request提交xml数据
function login(){
var requestConfig = {
url :'loginServerXml.jsp',//请求的服务器地址
xmlData : getXml(),//发送xml文档对象
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
}
//生成xml文档对象
function getXml(){
var name = document.forms['loginForm'].userName.value;
var pwd = document.forms['loginForm'].password.value;
var dom = new ActiveXObject("msxml2.DOMDocument");
var header = dom.createProcessingInstruction("xml", "version='1.0'");
dom.appendChild(header);
var root = dom.createElement("loginInfo");
var userName = dom.createElement("userName");
userName.text = name;
var password = dom.createElement("password");
password.text = pwd;
root.appendChild(userName);
root.appendChild(password);
dom.appendChild(root);
return dom;
}
xt.Ajax. request提交json数据
function login(){
var requestConfig = {
url :'loginServerJson.jsp',//请求的服务器地址
jsonData : getJson(),//发送json对象
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
}
//生成json对象
function getJson(){
var name = document.forms['loginForm'].userName.value;
var pwd = document.forms['loginForm'].password.value;
var jsonObj = {
userName : name,
password : pwd
}
return jsonObj;
}
Ext.Updater.update div内容更新器示例
var updater = Ext.get('content-div').getUpdater();//得到元素的更新器
var btns = Ext.select('input');//选择页面中的所有input组件
btns.addListener('click',function(e,b){//成批绑定click事件
update('9-5-'+b.value+'.html');//调用更新函数
});
//定义更新函数
function update(url){
updater.update({//调用更新器的update方法，更新页面元素
url : url
});
}
定义渲染器更新页面元素示例
Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器
var updater = Ext.get('content-div').getUpdater();//得到元素的更新器
var cusRender = function(){//自定义渲染器
this.render = function(el, response, updateManager, callback){
var time = el.query('input')[0];
time.value = response.responseText;
}
}
updater.setRenderer(new cusRender());//指定自定义渲染器
var btns = Ext.get('updateBtn');//选择页面中id为updateBtn的元素
btns.on('click',function(){//绑定click事件
update();//调用更新函数
});
//定义更新函数
function update(){
updater.update({//调用更新器的update方法，更新页面元素
url : 'timeServer.jsp'
});
}
自动定时更新页面元素示例
Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器
var updater = Ext.get('serverTime').getUpdater();//得到元素的更新
Ext.get('startAutoBtn').on('click',startAutoUpdate);
Ext.get('stopAutoBtn').on('click',stopAutoUpdate);
function startAutoUpdate(){
//开始定时自动刷新
updater.startAutoRefresh(1,'timeServer.jsp');
}
function stopAutoUpdate(){
//停止定时自动刷新
updater.stopAutoRefresh();
}
提交表单更新页面元素示例
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
Ext.Updater.defaults.indicatorText =
'<div class="loading-indicator">登陆中....</div>';//设置更新指示器文字
var updater = Ext.get('loginMsg').getUpdater();//得到元素的更新
Ext.get('loginBtn').on('click',login);
function login(){
//提交表单，在回调函数中更新页面元素
updater.formUpdate('loginForm','loginServer.jsp');
}
})
// --></mce:script>
</HEAD>
<BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">
<form id='loginForm'>
用户名：<input name = 'userName' type='text'>
密 码：<input name = 'password' type='password'>
<input type='button' value='登陆' id='loginBtn'>
</form>
状 态：<span id='loginMsg'></span>
</BODY>
</HTML>
多级联动菜单
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
//将下拉框id顺序存入数组中，以便通过遍历数组级联更新
var lists = ['s1','s2','s3']
//为下拉框绑定change事件的处理函数
Ext.select('select').on('change',function(e,select){
//取得下拉框中选中的值
var value = select.options[select.selectedIndex].value;
//取得下拉框id
var id = select.id;
//通过循环的到下拉框id在lists数组中的索引位置
for(var i = 0 ; i < lists.length ; i++){
if(lists[i] == id){
var index = i;
}
}
//取得相邻下拉框id在lists数组中的索引
var nextIndex = index + 1;
if(nextIndex >= lists.length){
nextIndex = lists.length - 1;
}
//移除相邻下拉框及后续下拉框的值
remove(nextIndex);
//为相邻下拉框及后续下拉框加载新值
getList(nextIndex,value);
});
//通过Ajax方式为下拉框加载数据，
function getList(index,value) {
Ext.Ajax.request({
url : 'bookServer.jsp',//请求的服务器地址
params : {
target : lists[index],
value : value
},
callback : function(options,success,response){
if(success){
//取得要更新的下拉框
var select = Ext.get(lists[index]);
//执行返回字符串，得到数组对象
var array = eval(response.responseText);
//记录数组中的第一各种，该值将作为下级下拉框的默认取值条件
var firstValue;
for(var i=0 ; i < array.length ; i++){
var o = array[i];
if(i == 0){
firstValue = o.value;
}
//向下拉框中追加条目
select.appendChild(createOption(o.value,o.name));
}
//如果不是最后一个下拉框则继续加载相邻下拉框的数据
if(index < lists.length){
getList(index + 1,firstValue);
}
}
}
})
}
//根据传入的value和text创建选项
function createOption(value, text) {
var opt = document.createElement("option");
opt.setAttribute("value", value);
opt.appendChild(document.createTextNode(text));
return opt;
}
//级联删除下拉框及子下拉框的值
function remove(index){
for(var i = index ; i < lists.length ; i++){
var select = Ext.get(lists[i]).dom;
while(select.length>0){
select.options.remove(select.length-1)
}
}
}
//默认加载值为1的教学类列表
getList(1,"1");
//默认列表s1的教学类被选中
Ext.get('s1').dom.selectedIndex = 0;
})
// --></mce:script>
自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报）
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
//设置更新指示器文字
Ext.Updater.defaults.indicatorText =
'<div class="loading-indicator">读取天气信息....</div>';
//得到元素的更新器
var updater = Ext.get('weather').getUpdater();
//自定义渲染器
var weatherRender = function(){
this.render = function(el, response, updateManager, callback){
//解码响应字符串，得到对应的json对象
var weaObj = Ext.util.JSON.decode(response.responseText);
//利用工具类Ext.DomHelper的overwrite方法生成表格并以覆盖方式更新元素el
Ext.DomHelper.overwrite(el,{
tag:'table',children:[
{tag:'tr',children:[
{tag:'td',html:'日期：'},
{tag:'td',html:weaObj.date}
]},
{tag:'tr',children:[
{tag:'td',html:'风速：'},
{tag:'td',html:weaObj.windSpeed}
]},
{tag:'tr',children:[
{tag:'td',html:'湿度：'},
{tag:'td',html:weaObj.humidity}
]},
{tag:'tr',children:[
{tag:'td',html:'最高气温：'},
{tag:'td',html:weaObj.maxTemp}
]},
{tag:'tr',children:[
{tag:'td',html:'最底气温：'},
{tag:'td',html:weaObj.minTemp}
]}
]
});
}
}
//指定自定义渲染器
updater.setRenderer(new weatherRender());
//选择页面中id为select的元素
var select = Ext.get('city');
//绑定change事件
select.on('change',function(e,sel){
var cityCode = sel.options[sel.selectedIndex].value;
var cityName = sel.options[sel.selectedIndex].text;
//调用更新函数,并将选中城市的编码出入更新函数中
updateWeather(cityCode,cityName);
});
//定义更新函数
function updateWeather(cityCode,cityName){
updater.update({//调用更新器的update方法，更新页面元素
url : 'weatherServer.jsp',
params : {cityCode:cityCode},
callback : function(el,success,response,options){
//读取天气信息失败，则更新页面元素已显示错误提示
if(success == true){
Ext.get('cityName').update(cityName);
}else{
el.update("读取 "+cityName+" 天气信息失败!");
}
}
});
}
//默认读取北京的天气情况
updateWeather('CHXX0008','北京');
})
// --></mce:script>
Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器)
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示
var note = new Ext.Panel({
title:'网络记事本',
renderTo : 'webNote',
frame : true,
layout:'fit',
tbar : [
{
text : '保存',
//点击保存按钮即时执行保存操作不进行延时
handler : saveNode
},
'-',
'最近保存时间：',
Ext.get('saveTime').dom,
'-',
Ext.get('saveStatus').dom
],
items : [
new Ext.form.HtmlEditor({
id : 'content',
height : 150,
width : 500,
fontFamilies : ['宋体','隶书','黑体'],//字体列表
listeners : {
//sync事件将在文本发生变化时被触发
sync : editorChange
}
})
]
});
//取得HtmlEditor组件的引用
var editor = note.findById('content');
//设置更新指示器文字
Ext.Updater.defaults.indicatorText =
'<div class="loading-indicator">保存....</div>';
//取得页面中id为saveTime元素的更新器
var timeUpdater = Ext.get('saveTime').getUpdater();
//取得页面中id为saveStatus元素的引用
var saveStatus = Ext.get('saveStatus');
//定义HtmlEditor输入内容发生变化时的处理函数
function editorChange() {
//文本变化后延时3000毫秒执行保存操作
task.delay(3000);
}
//将保存操作转换为一个延时任务
var task = new Ext.util.DelayedTask(saveNode);
//定义保存文本内容的函数
function saveNode() {
timeUpdater.update({
url : 'noteServer.jsp',
method : 'POST',
params : {
//将文本内容作为参数传递到后台服务器
content : editor.getValue()
},
callback : function(el,success,response,options){
if(success == true){
saveStatus.update("<font color='green'>保存成功</font>");
}else{
saveStatus.update("<font color='red'>保存失败</font>");
}
}
})
}
})
// --></mce:script>
</HEAD>
<BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">
<div id='webNote' style="width:522"/>
<div id='saveTime'/>
<div id='saveStatus'/>
</BODY>
</HTML>
文章来自：http://www.cnblogs.com/johan/archive/2010/04/05/1947977.html
相关推荐
教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS 入门教程。本教程主要是针对ExtJS2.0 进行介绍，全部代码、截图等都是基于ExtJS2.0。
extjs4.0 实现了主页面框架（主框架使用Ext.Viewport，banner使用Ext.panel.Panel，通过toolbar来放置按钮），包括左侧动态菜单实现（采用Ext.tree.Panel）动态从数据库加载数据来显示菜单（后台代码也在了通过json...
Extjs Tree + JSON + Struts2 示例源代码
本教程包括 ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等，是一个非常适合新手的 ExtJS 入门教程。本教程主要是针对 ExtJS2.0 进行介绍，全部代码、截图等都是基于 ExtJS2.0。
Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/...ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式...ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javaｓｃｒｉｐｔ写的，主 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
不仅全面地阐述了ExtJS的基础知识，而且深入浅出地讲解了ExtJS开发中的高级技巧，同时还给出了大量专家级的建议。通过学习本书，读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...
基于vs2010的省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs) 示例源代码。
教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例 应用等，是一个非常适合新手的ExtJS 入门教程。本教程主要是针对ExtJS2.0 进行介绍，全 部代码、截图等都是基于ExtJS2.0。
不仅全面地阐述了ExtJS的基础知识，而且深入浅出地讲解了ExtJS开发中的高级技巧，同时还给出了大量专家级的建议。通过学习本书，读者将感受到ExtJS的无穷魅力和Ajax技术带来的完美体验。 本书适合有一定CSS和HTML...
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
从入门到精通Extjs教程。Extjs专家力作，示例丰富，理论实践并重。ajax中国，dojo中国，开源中国社区一起力荐。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码
最后利用一个商品信息管理系统和一个企业任务管理系统，向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘，提供了书中实例的源代码和视频教学文件。此外，读者还可以...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用，需要用多个框架，一个典型的应用场景是省市三级联动，基于此应用，特将三种主要的ajax框架...