Extjs 填請假條界面Demo

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