How can i get a loading for saving data?

[sosyxg]

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var Username,Password;
var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 60,
waitMsgTarget: 'box-bd'
});

fs.fieldset(
{legend:'请先登录'},
Username = new Ext.form.TextField({
fieldLabel: '用户名',
name: 'Username',
width:190,
maxLength:12,
maxLengthText:'用户名长度大于12!',
id:'Username'

}),

Password = new Ext.form.TextField({
fieldLabel: '密码',
name: 'Password',
width:190,
maxLength:12,
maxLengthText:'密码长度大于12!'

})
);

var Save = fs.addButton({
text: '登录',
handler: function(){
if(Username.getValue().length < 1)
{
Ext.MessageBox.alert('提示信息:', '请先输入用户名!',function(){
Username.focus();
});
}
else if(Username.getValue().length > 12)
{
Ext.MessageBox.alert('提示信息:', '用户名长度大于12!',function(){
Username.reset();
Username.focus();
});
}
else if(Password.getValue().length < 1)
{
Ext.MessageBox.alert('提示信息:', '请先输入密码!',function(){
Password.focus();

}); }
else if(Password.getValue().length > 12)
{
Ext.MessageBox.alert('提示信息:', '密码长度大于12!',function(){
Password.reset();
Password.focus();

}); }
else
{

Ext.Ajax.request({
url:'Test.jsp',
method:'GET',
callback:function(options,success,response){

if(success)
{
alert(response.responseText);
}
else
{
//need a loading
}
}
});

}
}
});



var Reset = fs.addButton({
text: '重设',
handler: function(){
fs.reset();
Username.focus();
}
});

fs.render('form-ct');
Ext.getDom("Username").focus();

fs.on({
beforeaction: function(form, action){
Save.disable();
},
actioncomplete: function(form, action){
alert(action.type);

if(action.type == 'submit'){
Save.enable();
}
},
actionfailed: function(form, action){
Save.enable();
}
});



});

Ext.form.XmlErrorReader = function(){
Ext.form.XmlErrorReader.superclass.constructor.call(this, {
record : 'field',
success: '@success'
}, [
'id', 'msg'
]
);
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);

[HeathT]

I'm not sure because your code is different than mine in several ways (ie. I use this on a form submission while waiting for a success/failure response) but I believe this might work:




Ext.Ajax.request({
url:'Test.jsp',
waitMsg: 'Loading, please wait...',
method:'GET',
callback:function(options,success,response){

if(success)
{
alert(response.responseText);
}
else
{
//need a loading
}
}
});

}
}
});

[para]

sosyxg, put your code in the code tags! There is a button on the editor to do this.

I do the same thing. I have a startLoading() and an endLoading(). They are based on the loading screen on the Ext API page.


function startLoading() {
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setWidth("100%");
mask.setHeight("100%");
mask.setLeftTop(0,0);
mask.setOpacity(.8);
mask.show();
loading.show();
}

function endLoading() {
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:false,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:false, callback:function() {
loading.hide();
mask.hide();
}});
}
});
}

To use them with my request....


get: function(type, appId, url){
startLoading();
var conn = new Ext.data.Connection();
conn.request({ url: url,
callback: tm.load,
method:'GET'});
},
loadTrial: function(options, success, response) {
if(response && response.responseText) {
eval(response.responseText);
}
endLoading();
},


Works like a charm for me.

[ttlu]

to para:
This is great!Thank you!

[zyanlu]

yourForm.el.mask('loading','x-mask-loading');