我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Ext Form daterange&passwordfield 练习

<HTML>
 
<HEAD>
  
<TITLE> date form validation .etc </TITLE>
  
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
     
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
  
<script type="text/javascript" src="../../../ext-all-debug.js"></script>
<script>
    
//将新属性daterange,password,添加到form.Vtypes
    Ext.apply(Ext.form.VTypes, {
    daterange : 
function(val, field) {
        
var date = field.parseDate(val);

        
if(!date){
            
return;
        }

        
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            
var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            
this.dateRangeMax = date;
        }
 
        
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            
var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            
this.dateRangeMin = date;
        }

        
return true;
    }
,

    password : 
function(val, field) 
    
{
        
if (field.initialPassField) {
            
var pwd = Ext.getCmp(field.initialPassField);
            
return (val == pwd.getValue());
        }

        
return true;
    }
,

    passwordText : '两次密码输入不一致'
}
);


    Ext.onReady(
function(){
    
//开始验证提示
    Ext.QuickTips.init();

    
// 将验证信息显示在旁边
    Ext.form.Field.prototype.msgTarget = 'side';

    
var bd = Ext.getBody();

    
var dr = new Ext.FormPanel(
    
{
      labelWidth: 
120//标签显示宽度
      frame: true,   //is frame
      title: '日期选择范围',
      width: 
350,
      defaults: 
{width: 175},
      defaultType: 'datefield',
      renderTo : 'dr',
      allowDomMove : 
true,
      items: [
{
        fieldLabel: '开始日期',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' 
//结束日期的id(开始日期小于结束日期)
      }
,{
        fieldLabel: '结束日期',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' 
//开始日期的id 
      }
]
    }
);

    
    
//构建一个密码Form    
    var pwd = new Ext.FormPanel({
      labelWidth: 
125,
      frame: 
true,
      title: '密码验证框',
      width: 
350,
      renderTo : 'pw',
      allowDomMove : 
true,
      draggable : 
true,
      defaults: 
{
        width: 
175,
        inputType: 'password'
      }
,
      defaultType: 'textfield',
      items: [
{
        fieldLabel: '密码:',
        name: 'pass',
        id: 'pass'
      }
,{
        fieldLabel: '密码确认:',
        name: 'pass
-cfrm',
        vtype: 'password',
        initialPassField: 'pass'
      }
]
    }
);
    
    
//构造一个window容器
    var window = new Ext.Window({
        x : 
200,
        y : 
200,
        maximizable : 
true//显示最大化按钮
        minimizable : true//显示最小化按钮
        //autoWidth : true,
        width : 350,
        width : 
400,
        
//autoHeight : true,
        title : '测试窗口',
        renderTo : 'd',
        resizable : 
true,
        items : [dr,pwd]
    }
);
    window.show();
    
//构建两个按钮
    new Ext.Button({
        text : '显示',
        renderTo : 'b1',
        handler : 
function()
        
{
            window.show();
        }

    }
);

    
new Ext.Button({
        text : '隐藏',
        renderTo : 'b2',
        handler : 
function()
        
{
            window.hide();
        }

    }
);
    

}
);
</script>
 
</HEAD>
 
<BODY>
    
<div id='b1'></div>
    
<div id='b2'></div>
    
<div id='d'></div>
    
<div id='dr'></div>
    
<div id='pw'  style="padding-top:20px"></div>
 
</BODY>
</HTML>
效果图:


posted on 2008-08-19 16:55 々上善若水々 阅读(1388) 评论(1)  编辑  收藏 所属分类: JavaScript

评论

# re: Ext Form daterange&passwordfield 练习   回复  更多评论   

你不觉得这样很怪吗?有没有更好的布局?。
2009-05-08 15:53 | BigOldMouse

只有注册用户登录后才能发表评论。


网站导航: