Untitled

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>Test</title>

	 <!-- Sencha Touch CSS -->
	 <link rel="stylesheet" href="lib/touch/resources/css/sencha-touch.css" type="text/css">

	 <!-- Custom CSS -->
	 <link rel="stylesheet" href="css/guide.css" type="text/css">

	 <!-- Sencha Touch JS -->
	 <script type="text/javascript" src="lib/touch/sencha-touch-debug.js"></script>


 </head>

 <body>
 <script>
 var MyForm;
 var MyWindow;
 var Txt_Name;
 var Txt_BirthDate;

Ext.onReady(function(){

	Txt_Name = new Ext.form.TextField({
	    id: 'Name',
	    fieldLabel: 'Name',
	    minLength : 1,
	    maxLength: 20,
	    selectOnFocus: true,
	    allowBlank: false,
	    anchor : '80%',
	    maskRe: /([0-9]+)$/
	      });

	 Txt_BirthDate = new Ext.form.DatePicker({
		    id: 'BirthDate',
		    fieldLabel: 'Birth date',
		    vtype: 'daterange',
		    format: 'd/m/Y',
		    allowBlank: false,
		    anchor : '32%'
		      });


	MyForm = new Ext.form.FormPanel({
	        labelAlign: 'top',
		frame:true,
	        bodyStyle:'padding:5px 5px 0',
	        width: 390,
		buttonAlign:'right',
		items: [Txt_Name, Txt_BirthDate],
		buttons: [{
		      text: 'Save'
		    },{
	      	      text: 'Cancel',
		      handler: function(){
	      	           MyWindow.hide();
		    }
	    }]
	    });

	MyWindow = new Ext.Window({
	      id: 'MyWindow',
	      title: 'New Friend',
	      closable:true,
	      width: 350,
	      height: 240,
	      plain:true,
	      layout: 'fit',
	      items: MyForm,
	      form:  MyForm.getForm(),
	      listeners: {
		"show" : function() {
			var firstElem = MyForm.getForm().findField(0);
			firstElem.focus.defer(150, firstElem);
	  	        }
		}
	    });
	MyWindow.show();

});


 </script>
 </body>

 </html>