`
zuyali
  • 浏览: 14692 次
  • 性别: Icon_minigender_2
  • 来自: 苏州
社区版块
存档分类
最新评论

extjs 年月日联动下拉框

阅读更多

TimePanel=Ext.extend(Ext.form.FormPanel,{
 constructor:function(){
  TimePanel.superclass.constructor.call(this,{
   border:false,
   defaults:{border:false},
   layout:'column',
   items:[{
    xtype:'combo',
    value:'2011',
    width:60,
    name:'yearcombo',
    store:new Ext.data.SimpleStore({
     fields:['year'],
     data:[['2010'],['2011'],['2012'],['2013']]
    }),
    listeners:{'select':this.changeDay},
    mode:'local',
    displayField:'year',
    valueField:'year',
    triggerAction:'all'
   },{
    xtype:'label',
    text:'年'
   },{
    xtype:'combo',
    value:'07',
    name:'monthcombo',
    width:50,
    store:new Ext.data.SimpleStore({
     fields:['month'],
     data:[['01'],['02'],['03'],['04'],['05'],['06'],['07'],['08'],['09'],['10'],['11'],['12']]
    }),
    listeners:{'select':this.changeDay},
    mode:'local',
    displayField:'month',
    valueField:'month',
    triggerAction:'all'
   },{
    xtype:'label',
    text:'月'
    
   },{
    xtype:'combo',
    value:'10',
    width:50,
    name:'daycombo',
    store:new Ext.data.SimpleStore({
     fields:['day'],
     data:[['01'],['02'],['03'],['04'],['05'],['06'],['07'],['08'],['09'],['10'],
       ['11'],['12'],['13'],['14'],['15'],['16'],['17'],['18'],['19'],['20'],
       ['21'],['22'],['23'],['24'],['25'],['26'],['27'],['28'],['29'],['30'],['31']]
    }),
    mode:'local',
    displayField:'day',
    valueField:'day',
    triggerAction:'all'
   },{
    xtype:'label',
    text:'日'
   }]
  });
 },
 /**
  * 年月变化,改变日
  */
 changeDay:function(){
  //每个月的初始天数  
                MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
  var year=this.ownerCt.findByType("combo")[0].getValue();
  var month=this.ownerCt.findByType("combo")[1].getValue();
  var n = MonDays[month - 1];  
  if(month=='2'&&isLeapYear(year)){
   n++;
  }
  
  var _store=new Ext.data.SimpleStore({
   fields:['day']
  });
  //填充日期下拉框
  for(var i=1; i<=n; i++)  
            {  
               var _record=new Ext.data.Record({'day':i});
      _store.add(_record);
            }
     this.ownerCt.findByType("combo")[2].store=_store;
     if(this.ownerCt.findByType("combo")[2].view)
      this.ownerCt.findByType("combo")[2].view.setStore(_store);  
 },
 /**
  * 判断是否闰年  
  * @param {} year
  * @return {}
  */
 isLeapYear:function (year)
    {   
          return( year%4==0 || (year%100 ==0 && year%400 == 0));  
    } 
});

分享到:
评论

相关推荐

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    EXTJS 选下拉框,并取得下拉框的值

    首先,创建一个基本的EXTJS下拉框需要定义`Ext.form.field.ComboBox`对象。以下是一个简单的示例: ```javascript Ext.application({ name: 'MyApp', launch: function () { Ext.create('Ext.container.Viewport...

    Extjs 年月日时分秒组件

    "Extjs 年月日时分秒组件"是一个特定的插件,允许用户在应用程序中选择精确到时分秒的时间。这种组件对于需要用户输入特定时间的应用场景非常有用,例如日程安排、预约系统等。 该组件的核心功能是提供一个交互式的...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选 本网站需要12积分下在的,现在共享都给大家

    EXTJS时间控件年月日时分秒

    压缩包中的“ExtJS年月日时分秒组件”可能包含了实现这个功能的示例代码,包括EXTJS的配置、布局、样式以及可能的自定义扩展。学习这个组件,你可以查看源码,了解如何组合EXTJS的基本组件和配置,实现一个完整的...

    extjs表单中的下拉框(comobobox)手动添加空选项

    ### ExtJS表单中的下拉框(ComboBox)手动添加空选项 在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它...

    extjs 复选下拉框的例子

    本文将深入探讨如何在ExtJS中实现复选下拉框(Multiselect ComboBox),并提供一个具体示例,帮助开发者更好地理解和应用这一功能。 ### ExtJS复选下拉框的实现 复选下拉框在用户界面设计中非常有用,它允许用户从...

    extjs多选 下拉框扩展

    然而,标准的ExtJS下拉框只支持单选模式。为了实现多选功能,我们需要对其进行扩展。这个“extjs多选 下拉框扩展”就是解决这个问题的一种方案。 首先,我们要理解ExtJS的ComboBox的基本结构。ComboBox由一个输入框...

    extjs年月选择控件

    extjs的年月选择控件,主要针对原有的extjs Datefield控件的基础上增加了插件

    ExtJs学习例子:多级联动下拉菜单演示例子

    前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区

    最简单的下拉框联动不刷新页面示例

    在网页开发中,下拉框联动是一种常见的交互设计,它允许用户在选择一个下拉框选项后,另一个相关的下拉框会自动更新其内容,而无需整个页面进行刷新。这种功能提高了用户体验,减少了不必要的数据传输,加快了页面...

    修复Extjs4.2 时间下拉框不能选择问题

    Extjs4.2 时间下拉框的 年和月是不可以选择的, 本插件可完美修复, 且在4.2.3上面测试的, 花了几天修复的所以分数高点;

    extjs多选下拉框

    在EXTJS框架中,"多选下拉框"(Multi-Select ComboBox)是一种常见的组件,它允许用户在下拉列表中选择多个选项。EXTJS 3.*版本也提供了这种功能,使得开发者能够创建功能丰富的界面,提升用户体验。下面将详细解释...

    Extjs3 多选下拉框LovCombo

    在ExtJS 3中,多选下拉框(LovCombo)是一种复合组件,它结合了下拉列表和“爱好者选择”(LOV,Lookup Value)的功能,允许用户在多个选项中进行复选选择。在Web应用中,这种组件常用于数据输入,特别是在数据库...

    EXTJS多选下拉框

    在EXTJS中,多选下拉框(Lovcombo)是一种常见的组件,它结合了选择列表和输入框的功能,允许用户从预定义的选项中选择多个条目。这个lovcombo是lov(List-Value)和combo(组合框)的结合体,提供了丰富的交互性和...

    extjs 复选下拉框封装好

    extjs 复选下拉框的例子

    extjs实现下拉框多选

    在ExtJS中,下拉框(ComboBox)是用户界面中常见的组件,通常用于单选操作。然而,通过扩展和定制,我们也可以实现下拉框的多选功能。在本篇中,我们将深入探讨如何在ExtJS中实现下拉框的多选功能。 首先,了解基本...

    ssh2+extCombobox联动动态下拉框

    当我们将SSH2与ExtJS ComboBox结合使用时,可以创建动态联动的下拉框,实现数据的级联选择,提高用户交互体验。 在SSH2框架中,Struts2负责处理用户的请求和视图展示,Spring则管理应用的业务逻辑和依赖注入,...

Global site tag (gtag.js) - Google Analytics