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>'
}]}
);


5 一个下拉COMBOBOX异步跟后端AJAX结合

该action返回JSON格式[[1,‘帅哥'],[2，’美女']]

  <script type="text/javascript">

function init()
{
var sexStore = new Ext.data.Store(
     {
proxy : new Ext.data.HttpProxy(
{
url : 'kxw/sex.action'
}),
reader : new Ext.data.ArrayReader(
{},
[
{
name : 'id'
},
{
name : 'name'
} ])
});
sexStore.load();
var sexField = new Ext.form.ComboBox(
{
name : 'sex',
store : sexStore,
fieldLabel : '性别',
mode : 'remote',
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
hiddenName : "sexId",
minListWidth : 220,
readOnly : true
});

     var formPanel = new Ext.form.FormPanel( 
{
labelAlign : 'right',
labelWidth : 60,  
width:280,
height:100, 
title:'表单', 
frame : true,
items : 
[
{
layout:'form',
items :
[sexField ]
} ]

});
      formPanel.render("form");     
}
Ext.onReady(init);


6 EXTJS的非空校验
   Ext.QuickTips.init();
var nameField = new Ext.form.TextField(
{
allowBlank: false,
blankText:'必须输入姓名',
fieldLabel : '姓名'


});
7 对数字及精度的校验：
Ext.QuickTips.init();
var numberField = new Ext.form.NumberField(
{
maxValue:20,
maxText:'输入的最大值不能超过20',
decimalPrecision:3,
    nanText:'您输入了无效的数字',
fieldLabel : '数字'  
});
   其中    decimalPrecision表明数字的精度为3，即小数后3位

8 正则表达式
    Ext.QuickTips.init();
var regexField = new Ext.form.TextField(
{
regex:/^[a|b|c|d]*$/,
regexText:'只能输入abcd中的一个或多个字母',
fieldLabel : '字母',
anchor:'90%'
});

9  自定义的校验方法
var textField2 = new Ext.form.TextField(
{
fieldLabel : '子串',
validator:validateSubstring,
invalidText:'输入的字符串必须是主串中的子串',
anchor:'90%'
});
      validator中，指定一个自定义的javascript校验方法
     function validateSubstring(value)
{
if(textField1.getValue().indexOf(value) < 0)
return false;
else
return true;
}

10 EXTJS中的登陆状态记录，一般来说会有个下拉框，然后让用户选择把登陆状态保留多少天，
var loginStateData = [
                ['0', '不自动登录'],
                ['1', '在一天内自动登录'],
                ['2','在一周内自动登录'],
                ['3', '在一个月内自动登录'],
                ['4', '在一年内自动登录']
                ];
var loginStateStore = new Ext.data.SimpleStore(
{
fields:['id', 'value'],
data:loginStateData
}
);
var loginStateCombobox = new Ext.form.ComboBox(
{

fieldLabel:'登录状态',
store:loginStateStore,
mode:'local',
triggerAction:'all',
valueField:'id',
displayField:'value',
hiddenName : "loginStateId",
readOnly:true,
anchor : '90%'
}
);

     在login.action中：
   if (userService.verifyUser(user))
{
success = true;
int time = 0;
switch (user.getLoginStateId())
{
case 1:
time = 24 * 3600;
break;
case 2:
time = 24 * 3600 * 7;
break;
case 3:
time = 24 * 3600 * 30;
break;
case 4:
time = 24 * 3600 * 365;
break;
}
if (time > 0)
{
HttpSession session = request.getSession();
session.setMaxInactiveInterval(time);


session.setAttribute("email", user.getEmail());
Cookie cookie = new Cookie("JSESSIONID", session.getId());
cookie.setMaxAge(time);
response.addCookie(cookie);
}
msg = "成功登录";
}