zoukankan      html  css  js  c++  java
  • extjs 时间范围选择的实现

    extjs中 有时须要选择一个日期范围 ,须要自己主动推断,选择的開始日期不能大于结束日期,或结束日期不能小于開始日期,实现的代码例如以下


    效果图:


    从上图能够看到,当选择了一个開始时间后,会自己主动限制结束时间的选择范围,实现两个日期选择器的联动.

    代码例如以下:

    首先定义联动处理函数:


        Ext.apply(Ext.form.field.VTypes, {
            daterange: function (val, field) {
                var date = field.parseDate(val);
    
                if (!date) {
                    return false;
                }
                if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
                    var start = field.up('grid').down('#' + field.startDateField);
                    start.setMaxValue(date);
                    start.validate();
                    this.dateRangeMax = date;
                }
                else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                    var end = field.up('grid').down('#' + field.endDateField);
                    end.setMinValue(date);
                    end.validate();
                    this.dateRangeMin = date;
                }
                return true;
            },
            daterangeText: '開始日期必须小于结束日期'
        });
    
        Ext.tip.QuickTipManager.init();
    


    在tbar,bbar或form中的items中添加:


            {
                xtype: 'datefield',
                fieldLabel: '时间范围  開始',
                name: 'startdt',
                id: 'startdt',
                vtype: 'daterange',
                endDateField: 'enddt',
                format: 'Y-m-d',
                 220,
                labelWidth: 90,
                msgTarget: 'side',
                autoFitErrors: false
            }, {
                xtype: 'datefield',
                fieldLabel: '结束',
                name: 'enddt',
                id: 'enddt',
                vtype: 'daterange',
                startDateField: 'startdt',
                format: 'Y-m-d',
                 170,
                labelWidth: 40,
                msgTarget: 'side',
                autoFitErrors: false
            }, { xtype: 'button',
                text: '查询',
                iconCls: 'fljs',
                handler: function () { ...


    就可以实现以上效果 本代码复制在extjs4.1.1中执行


  • 相关阅读:
    个人电脑软件清单
    Apache代理80端口
    使用eclipse转换普通项目为web项目
    项目范围管理的重要性
    Ant 风格路径表达式(转)
    jquery autoComplete的使用代码一则
    Java 遍历一个对象的属性 将非空属性赋值给另一个对象
    Eclipse 安装应用SVN地址
    (转)C的代码是如何变成程序的
    (转)编译和链接的区别
  • 原文地址:https://www.cnblogs.com/lytwajue/p/7048784.html
Copyright © 2011-2022 走看看