PDA

View Full Version : How to display Calendar Date Picker in Ext.TabPanel



hey_aloha
17 Jun 2011, 1:00 AM
Hi All,

I've downloaded an Alternative Date Picker for Sencha Touch from github:
https://github.com/megous/sencha-touch-ux-datepicker

Using the sample Tab Panel 'tab2', I have created an additional tab (to display the Date Picker):


title: 'MyTab',
html: '<h1>My Card</h1>',
cls: 'card6',
iconCls: 'info'


I then added the following code to the html file (to call the date picker):


<script>
Ext.setup({
onReady: function() {
Ext.Ajax.defaultHeaders = {
'Content-Type': 'application/json; charset=UTF-8'
};
var dp = new Ext.ux.DatePicker({
fullscreen: true
});
}
});
</script>

The result is that the Date Picker is called, but displays in every tab. I realise that the call shouldn't be in the html file, but can't figure out the syntax to call it in 'MyTab'.

I'm a newbie to Javascript - any help would be greatly appreciated!

21 Jun 2011, 6:12 AM
What you're doing is completely incorrect. The DatePicker should be a child of your tab panel.

hey_aloha
21 Jun 2011, 4:10 PM
1. Commented out the date picker script call in the html file.

2. Added the following sections to the javascript file (see code insert below), commented by:
/* my code 2: START */
/* my code 2: END */

/* my code 3: START */
/* my code 3: END */



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

/* my code 2: START */
var setCard6 = function() {
localStorage.setItem('activeCard', 6);
navigationBar.setTitle('set card 6 title');
};


Ext.Ajax.defaultHeaders = {
'Content-Type': 'application/json; charset=UTF-8'
};


var dp = new Ext.ux.DatePicker({
fullscreen: true
});


var calendarContainer = new Ext.Container(
{styleHtmlContent: true,
scroll: true,
title: '<div class="transTab"></div>Translations',
listeners:{
activate: function() {dp.hide();
}
}
});

/* my code 2: END */

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Bottom Tabs</h1><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card1'
}, {
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4'
}, {
title: 'Downloads',
id: 'tab3',
html: '<h1>Downloads Card</h1>',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card3',
iconCls: 'download'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'
}, {
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user'
}, {

/* my code 1: START */
title: 'MyTab',
html: '<h1>My Card</h1>',
cls: 'card6',
iconCls: 'info',
/* my code 1: END */

/* my code 3: START */
id: '6',
items: [calendarContainer],
listeners:{
activate: setCard6
/* my code 3: END */
}]
});
}
});


When I run it now, I get a blank screen (incorrect syntax?).

If I comment out the 'my code 3: START/END' section, the following is displayed (see pic1.png below):
- the tab 'MyTab' is visible
- part of the calendar is displayed ('June 2011'), however it is displayed on ALL tabs

26675

Am I heading in the right direction?! Plz help..