Extjs 填请假条界面Demo

原创于 2016-11-25 14:38:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原创不易，白嫖不好，如果有用，请点赞，让更多的朋友看到这篇文章。

Extjs 同时被 2 个专栏收录

31 篇文章

订阅专栏

Extjs4 开发经验

18 篇文章

订阅专栏

本文介绍如何使用ExtJS开发一个简单的请假条填写界面的Demo，包括表单元素、布局管理和交互功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.create('Ext.Window', {
    title: '填写请假条',
    iconCls: 'extjs-icon-edit',
    closeAction: 'hide',
    width: 500,
    height: 330,
    maximizable: true,
    layout: 'fit',
    border: false,
    items:[{
      id: 'leaveFormPanel',
      xtype:'form',
      border: false,
      style: 'margin:15px',
      defaultType: 'textfield',
      defaults: {
        anchor: '98%'
      },
      fieldDefaults: {
        labelWidth: 30,
        labelAlign: 'left',
        msgTarget: 'side'
      },
      items: [{
        xtype: 'radiogroup',
        fieldLabel: '类别',
        allowBlank: false,
        items: [
          {boxLabel: '事假', inputValue: '事假', name: 'rb-type', checked: true},
          {boxLabel: '病假', inputValue: '病假', name: 'rb-type'},
          {boxLabel: '婚假', inputValue: '婚假', name: 'rb-type'},
          {boxLabel: '丧假', inputValue: '丧假', name: 'rb-type'},
          {boxLabel: '公假', inputValue: '公假', name: 'rb-type'},
          {boxLabel: '工伤', inputValue: '工伤', name: 'rb-type'},
          {boxLabel: '产假', inputValue: '产假', name: 'rb-type'},
          {boxLabel: '其他', inputValue: '其他', name: 'rb-type'}
        ]
      },{
        id:'reason',
        name:'reason',
        fieldLabel: '事由',
        xtype: 'textarea',
        autoScroll: true,
        allowBlank: false
      },{
        xtype: 'radiogroup',
        hideLabel: true,
        style: 'margin-left:40px',
        items: [
          {boxLabel: '全天', inputValue: "全天", name: 'rb-day', checked: true },
          {boxLabel: '上午', inputValue: "上午", name: 'rb-day'  },
          {boxLabel: '下午', inputValue: "下午", name: 'rb-day'  }
        ],
        listeners:{
          'change':function(group,checked){
            switch (checked['rb-day']) {
              case '全天':
                Ext.getCmp('starttime2').hide();
                Ext.getCmp('endtime2').hide();
                break;
              case '上午':
                Ext.getCmp('starttime2').show();
                Ext.getCmp('endtime2').show();
                Ext.getCmp('starttime2').setValue('9:00 上午');
                Ext.getCmp('endtime2').setValue('12:00 下午');
                break;
              case '下午':
                Ext.getCmp('starttime2').show();
                Ext.getCmp('endtime2').show();
                Ext.getCmp('starttime2').setValue('1:00 下午');
                Ext.getCmp('endtime2').setValue('6:00 下午');
                break;
            }
          }
        }
      },{
        xtype: 'panel',
        layout: 'hbox',
        style:'margin-top:5px',
        defaults: {
          flex: 1,
          border: false,
          editable: false
        },
        items: [{
          xtype: 'datefield',
          id: 'starttime',
          name:'starttime',
          fieldLabel: '开始',
          format: 'Y-m-d D',
          allowBlank: false,
          value:new Date(),
          listeners: {
            'select': function () {
              var start = Ext.getCmp('starttime').getValue();
              var endDate = Ext.getCmp('endtime').getValue();
              Ext.getCmp('endtime').setMinValue(start);
              if (start > endDate) {
                Ext.getCmp('endtime').setValue(start);
              }
            }
          }
        }, {
          xtype: 'timefield',
          id: 'starttime2',
          name: 'starttime2',
          hidden: true,
          hideLabel: true,
          value: '9:00 上午',
          minValue: '9:00 上午',
          maxValue: '6:00 下午'
        }]
      },{
        xtype: 'panel',
        layout: 'hbox',
        style:'margin-top:5px',
        defaults: {
          flex: 1,
          border: false,
          editable: false
        },
        items: [{
          id: 'endtime',
          name:'endtime',
          xtype: 'datefield',
          fieldLabel: '结束',
          format: 'Y-m-d D',
          allowBlank: false,
          value:new Date(),
          listeners: {
            'select': function () {
              var start = Ext.getCmp('starttime').getValue();
              var endDate = Ext.getCmp('endtime').getValue();
              if (start > endDate) {
                Ext.getCmp('starttime').setValue(endDate);
              }
            }
          }
        }, {
          id: 'endtime2',
          name: 'endtime2',
          xtype: 'timefield',
          hidden: true,
          hideLabel: true,
          value: '6:00 下午',
          minValue: '9:00 上午',
          maxValue: '6:00 下午'
        }]
      },{
        xtype: 'label',
        style:'margin-top:5px',
        text: '注：1、病假正常情况下须出具医院证明。2、提交后告知部门主管确认'
      }]
    }],
    buttonAlign:'center',
    buttons: [
      { xtype: "button", text: "提交", 
        handler: function () {}
      },
      { xtype: "button", text: "取消", 
        handler: function () {} 
      }
    ]
});