OpenGL

最新推荐文章于 2018-11-30 11:32:28 发布

原创最新推荐文章于 2018-11-30 11:32:28 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #date #validation #user #extjs #function

1 引进ext包

1) 首先从网站上下载extjs包。

2)在html中引入

3)在body中加入

4)执行脚本。

2 EXT表单

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

  /*
   * ================ Date Range =======================
   */

    var dr = new Ext.FormPanel({
      id:'FormPanel',
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
      bodyStyle:'padding:5px 5px 0',
     width: 350,
      defaults: {width: 175},
      defaultType: 'datefield',// 默认日期格式
      items: [{
        fieldLabel: 'user',
        name: 'user',
        id: 'user',
        xtype: 'textfield', //表示类型为输入框
        readOnly : true //当readonly 为true时出入框不可编辑

      },{
        fieldLabel: 'userpwd',
        name: 'userpwd',
        id: 'userpwd',
        xtype: 'textfield',//表示类型为出入
        inputType:'password'
      },{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    });

dr.render('dr');

//Ext.getCmp("FormPanel").form.findField('user').getEl().dom.readOnly = true;

    /*
     * ================ Password Verification ======================= var pwd = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Password Verification',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {
        width: 175,
        inputType: 'password'
      },
      defaultType: 'textfield',
      items: [{
        fieldLabel: 'Password',
        name: 'pass',
        id: 'pass'
      },{
        fieldLabel: 'Confirm Password',
        name: 'pass-cfrm',
        vtype: 'password',
        initialPassField: 'pass' // id of the initial password field
      }]
    });