JavaScript DHTML/Ext JS/Time Field

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

Create and use time field

   <source lang="html4strict">

<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>

asdf

</body> </html> 


 </source>


Create Ext.form.TimeField

   <source lang="html4strict">

<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 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> 


 </source>


minValue and maxValue for Ext.form.TimeField

   <source lang="html4strict">

<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 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> 


 </source>


Set increment value for time field

   <source lang="html4strict">

<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>

asdf

</body> </html> 


 </source>


Set min and max value for time value field

   <source lang="html4strict">

<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>

asdf

</body> </html> 


 </source>


Set time format for time field

   <source lang="html4strict">

<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>

asdf

</body> </html> 


 </source>


TimeField Example

   <source lang="html4strict">

<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>

</body> </html> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Time_Field&oldid=2387»