getAddOrEditStore:function(){
return this.addOrEditStore ||( this.addOrEditStore = new Ext.data.JsonStore({
autoDestroy: true,
url: 'ipsource/province-ip-sequence!input.action',
baseParams:{
id:this.id
},
root:'',
fields: ['id','beginIp', 'endIp','type.name','netWorkOperator.name','sourceUnit',{name:'netWorkOperator.code',mapping:'netWorkOperator.code'},{name:'type.code',mapping:'type.code'}]
}));
},
xtype: 'combo',
id:'netWorkOperator.code',
displayField:'name',
valueField:'code',
store:Surfilter.Resources.netWorkOperatorStore,
triggerAction:'all',
mode:'local',
hiddenName:'netWorkOperatorCode',
queryDelay:500,
fieldLabel: '运营商',
listeners:{
'select':function(comb,record,index){
Ext.Msg.alert("dd",comb.getValue());
}
}
xtype: 'button',
text: '修改',
handler:function(){
this.id=100,
this.getAddOrEditStore().load({
callback : function(r, options, success) {
console.log(r);
this.applyRecord(r[0]);
},
scope:this
});
},
scope:this
// 删除用户
delUsers: function(){
var grid = Ext.getCmp('idc-sys-mgr-user-list');
if(grid){
var selections = grid.getSelectionModel().getSelections();
if(selections.length==0){
Ext.Msg.alert('提示','请选择需要删除的用户');
return;
}
Ext.Msg.confirm('确认','真的需要删除用户信息吗?',function(value){
if(value=='yes'){
var userIdsArry = [];
Ext.each(selections,function(user){
var userId = user.get('id');
userIdsArry.push(userId);
});
Ext.Ajax.request({
method:'post',
params:{
checkedUserIds:userIdsArry
},
url:'account/user!deleteUsers.action',
success:function(result){
var result = Ext.decode(result.responseText);
if(result.ok){
Ext.Msg.alert('提示',result.value);
grid.getStore().reload();
}else{
Ext.Msg.alert('提示',result.value);
}
},
failure:function(){}
});
}
},this);
|
简单的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>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/homsky/archive/2010/04/05/5451853.aspx
|
