JavaScript DHTML/Ext JS/Time Field

Материал из Web эксперт
Перейти к: навигация, поиск

Create and use time field

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var dateField = {
       xtype      : "timefield",
       fieldLabel : "Time",
       anchor     : "100%"
    }
       
    new Ext.Window({
       title      : "Title",
       layout     : "form",
       labelWidth : 100,
       height     : 70,
       width      : 250,
       bodyStyle  : "padding: 5px",
       items      : dateField
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Create Ext.form.TimeField

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();
    /*
     *   Simple form  
     */
    bd.createChild({tag: "h2", html: "Form 1 - Very Simple"});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:"save-form.php",
        frame:true,
        title: "Simple Form",
        bodyStyle:"padding:5px 5px 0",
        width: 350,
        defaults: {width: 230},
        defaultType: "textfield",
        items: [{
                fieldLabel: "First Name",
                name: "first",
                allowBlank:false
            },{
                fieldLabel: "Last Name",
                name: "last"
            },{
                fieldLabel: "Company",
                name: "company"
            }, {
                fieldLabel: "Email",
                name: "email",
                vtype:"email"
            }, new Ext.form.TimeField({
                fieldLabel: "Time",
                name: "time",
                minValue: "8:00am",
                maxValue: "6:00pm"
            })
        ],
        buttons: [{
            text: "Save"
        },{
            text: "Cancel"
        }]
    });
    simple.render(document.body);
});
</script> 
</div>
</body>
</html>



minValue and maxValue for Ext.form.TimeField

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();
    /*
     *   Simple form  
     */
    bd.createChild({tag: "h2", html: "Form 1 - Very Simple"});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:"save-form.php",
        frame:true,
        title: "Simple Form",
        bodyStyle:"padding:5px 5px 0",
        width: 350,
        defaults: {width: 230},
        defaultType: "textfield",
        items: [{
                fieldLabel: "First Name",
                name: "first",
                allowBlank:false
            },{
                fieldLabel: "Last Name",
                name: "last"
            },{
                fieldLabel: "Company",
                name: "company"
            }, {
                fieldLabel: "Email",
                name: "email",
                vtype:"email"
            }, new Ext.form.TimeField({
                fieldLabel: "Time",
                name: "time",
                minValue: "8:00am",
                maxValue: "6:00pm"
            })
        ],
        buttons: [{
            text: "Save"
        },{
            text: "Cancel"
        }]
    });
    simple.render(document.body);
});
</script> 
</div>
</body>
</html>



Set increment value for time field

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var dateField = {
       xtype      : "timefield",
       fieldLabel : "Please select time",
       anchor     : "100%",
       minValue   : "09:00",
       maxValue   : "18:00",
       increment  : 30,
       format     : "H:i"
    }
       
    new Ext.Window({
       title      : "Title",
       layout     : "form",
       labelWidth : 100,
       height     : 70,
       width      : 250,
       bodyStyle  : "padding: 5px",
       items      : dateField
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set min and max value for time value field

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var dateField = {
       xtype      : "timefield",
       fieldLabel : "Please select time",
       anchor     : "100%",
       minValue   : "09:00",
       maxValue   : "18:00",
       increment  : 30,
       format     : "H:i"
    }
       
    new Ext.Window({
       title      : "Title",
       layout     : "form",
       labelWidth : 100,
       height     : 70,
       width      : 250,
       bodyStyle  : "padding: 5px",
       items      : dateField
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set time format for time field

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var dateField = {
       xtype      : "timefield",
       fieldLabel : "Please select time",
       anchor     : "100%",
       minValue   : "09:00",
       maxValue   : "18:00",
       increment  : 30,
       format     : "H:i"
    }
       
    new Ext.Window({
       title      : "Title",
       layout     : "form",
       labelWidth : 100,
       height     : 70,
       width      : 250,
       bodyStyle  : "padding: 5px",
       items      : dateField
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



TimeField Example

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
  var formPanel = new Ext.form.FormPanel({
    title:"TimeField Example",
    applyTo:"mainContent",
    layout:"form",
    labelAlign:"top",
    width:210,
    autoHeight:true,
    frame:true,
    items:[{
      xtype:"timefield",
      fieldLabel:"Time",
      minValue: "9:00 AM",
        maxValue: "6:00 PM",
        increment: 30
    }]
  });
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Time_Field&oldid=2387»