extjs学习1
EXTJS学习1


1 进度条
function progressOnclick()
{
Ext.MessageBox.progress('进度', '正在处理任务...', '0% 已完成');
var f = function(v){
         return function(){
             if(v == 22){
                 Ext.MessageBox.hide();
                 alert('任务已经完成！','结束');
             }else{
                 var i = v/21;
                 Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');
             }
        };
    };
    for(var i = 1; i < 23; i++){
        setTimeout(f(i), i*500);
    }   
}

2 多行输入文本框
  function multilinePromptOnclick()
{
    Ext.MessageBox.show({
        title: '输入',
        msg: '请输入您的联系方式:',
        width:300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        fn: showResultText,
        animEl:'multilinePrompt'
       
    });
}

3 带图象的对话框
  <style type="text/css">
        .x-window-dlg .icon-download {
            background:transparent url(images/download.gif) no-repeat top left;
            height:46px;
        }
</style>
  function saveWaitOnclick()
{ 
Ext.MessageBox.show({
title:'等待...',
    msg: '正在保存数据，请等待...',
    progressText: '保存...',
    width:300,   
    wait:true,
    waitConfig: {interval:200},
    icon:'icon-download' 
    });
    setTimeout(function(){
     Ext.MessageBox.hide();
     alert('数据保存成功！', '信息');
    }, 5000);

}

4 EXTJS中做一个校验码的框：
  var registerValidationCodeFieldSet = new Ext.form.FieldSet(
{
title : '校验',
autoHeight : true,
border : true,
layout : 'form',
defaultType : 'textfield',
items :
[
{
name : 'validationCode',
fieldLabel : '请输入校验码'
}, validationCodeImageFieldSet1 ]
});

var validationCodeImageFieldSet1=new Ext.form.FileSet({
xtype:'column',
border:false,
style:'margin-top:10px',
items:
[
{
xtype:'label',
html:'<a href="#" onclick="refreshValidationCodeImage1()"><img src="validationCode" +
id="vcImg1" onclick="src=\'validationCode?\'+new Date().getMilliseconds();"

id="xyz"/></a>'
},
{
xtype:'label',
style:'margin-left:10px',
html:'<a href="#" onclick="refreshValidationCodeImage1()">换一张</a>'
}]}
);