this.tabs = new Ext.Panel({
	fullscreen:true,			
	cardSwitchAnimation:'slide',
	layout:'card',
	items:[{
		dockedItems:appDemo.getPanelDockedItems('home', 'Date Picker'),
		cls:'pageBody',
		name:'home',
		html:'<div class="colorButton bRef B_Picker"><b>Show Picker</b><div class="info">Tap here to see Picker</div></div>'+
		'<div class="colorButton bRef B_TitledPicker"><b>Titled Picker</b><div class="info">Tap here to see Picker with titles</div></div>'+
		'<div class="colorButton bRef B_CustomPicker"><b>Custom Picker</b><div class="info">Tap here to see custom Picker</div></div>'+
		'<div class="HPFContent">Picker <a class="bRef ButtonVersion"  href="http://www.developerextensions.com/index.php">v 1.0</a> Powered by '+
		'<a class="bRef ButtonDeveloper" href="http://www.developerextensions.com">DeveloperExtensions.com</a><div>',
		listeners:{
			render:function(){
				var customPickerValue = {count:2, sTime:2, eTime:10, sun:false, mon:true, tue:false, wed:true, thu:false, fri:false, sat:false};
				if(localStorage.customPickerValue){
					customPickerValue = Ext.decode(localStorage.customPickerValue);
				}
				var that = this;
				that.datePicker = new Ext.DatePicker({
					useTitles:false
				});
				that.dateTitledPicker = new Ext.DatePicker({
					useTitles:true
				});
				that.alertTimePicker = new Ext.AlertTimePicker({
					useTitles:true,
					valueChanged:false,
					listeners:{
						change:function(){
							this.valueChanged = true;
						},
						hide:function(){
							if(this.valueChanged){
								customPickerValue = this.getValue();
								localStorage.customPickerValue = Ext.encode(customPickerValue);
							}
						}
					}
				});
				Ext.fly(this.el.dom.id).removeAllListeners().on({
					tap: function(ele, event){
						var el = Ext.fly(ele.getTarget()).findParent('.bRef', 5);
						if(!el){
							return;
						}
						var cName = el.className;
						if(cName.indexOf('B_Picker')>-1){
							that.datePicker.show();
						}else if(cName.indexOf('B_TitledPicker')>-1){
							that.dateTitledPicker.show();
						}else if(cName.indexOf('B_CustomPicker')>-1){
							that.alertTimePicker.show();
							that.alertTimePicker.setValue(customPickerValue);
						}
					}
				});
			}
		}
	}]
});