PDA

View Full Version : Tab Panel always on bottom



Trevor.S
9 Aug 2010, 11:02 AM
Hello,

I was hoping to have a tab panel always on the bottom of the screen to use for navigation throughout my page. I am having issues with placing a nested list inside of one tab, and a map inside of another. Is this possible, and any tips/examples to look at?

evant
9 Aug 2010, 5:21 PM
You can easily nest items:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
title: 'Map'
});

var position = new google.maps.LatLng(37.44885, -122.158592);

var mapdemo = new Ext.Map({
title: 'Map',
center: position
});

var nestedList = new Ext.NestedList({
title: 'List',
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
}, {
text: 'Option A.1.b'
}]
}, {
text: 'Option A.2',
customAttribute: 389
}]
}, {
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
}, {
text: 'Option B.2',
customAttribute: 2390
}]
}, {
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
}, {
text: 'Option C.2',
customAttribute: 77
}]
}]
});

new Ext.TabPanel({
fullscreen: true,
items: [mapdemo, nestedList]
});
}
});

Trevor.S
10 Aug 2010, 6:34 AM
Thank you for the help, I am currently testing on chrome and the map looks perfect, the nested list looks strange, but I will test it on my nexus one when I am able to later today. In your example the bar docks to the top to become tabs. I was hoping for the navigation to be on the bottoms as seen in the "Bottom Tabs" example. I changed the toolbar's dock variable to 'bottom' but it seemed to have no affect.

*EDIT: I was able to make it become bottom tabs by adding


tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},

to the TabPanel.

Just curious what does the following do?



var toolbar = new Ext.Toolbar({
dock: 'bottom',
xtype: 'toolbar',
title: 'Map'
});

With it removed it does not seem to change anything.

evant
10 Aug 2010, 6:39 AM
Copy the code from the tabs2 example to dock them to the bottom.

Trevor.S
10 Aug 2010, 7:22 AM
Thank you for your quick reply.
I tested it on my nexus one and had the same results as chrome. When the nested list is inside of TabPanel it resizes it and centers it making it look strange. I have attached a link to a screenshot to show an example. Is there any way to fix this?

http://i.imgur.com/XApd6.jpg

There is also a lot of flickering when navigating between tabs

EDIT* I am good at solving my problems right after I post.... It seems it had to do with the css I copied from the tabs2 example. It for some reason cuased the issue. I am going to try and figure out what part of it caused the issue now.

Trevor.S
10 Aug 2010, 11:17 AM
I seem to have run into another issue. I have it so there are two dummy tabs, a map tab, and a nested list tab. Aside from the map issues that I posted about in a different thread (pinch to zoom/zoom buttons not working) I seem to be unable to add a marker to the map that stays. Following the maps example I have created a marker, but it seems to vanish within seconds. If you load the page and quickly click on the map tab (and I mean really quickly) you can see the marker briefly in chrome. On my android phone it doesn't show up at all. If I remove my tabs and just place the map in a panel the marker seems to appear and stay. Below is the code I am trying to get working.


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


var position = new google.maps.LatLng(39.5, -98.35);
var gatech = new google.maps.LatLng(33.778463,-84.398881);
var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'info',
mapOptions: {
center: position,
zoom: 3,
}
});

var nestedList = new Ext.NestedList({
title: 'testing',
iconCls: 'time',
fullscreen: true,
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
},{
text: 'Option A.1.b'
}]
},{
text: 'Option A.2',
customAttribute: 389
}]
},{
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
},{
text: 'Option B.2',
customAttribute: 2390
}]
},{
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
},{
text: 'Option C.2',
customAttribute: 77
}]
}]
});




var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
//animation: {//animations are causing flashing on android
// type: 'slide',
// cover: true
// },
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<h1>Testing</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'
}, mapdemo,
nestedList]
});

var infowindow = new google.maps.InfoWindow({
content: 'Georgia Tech'
});

var marker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}
});

evant
10 Aug 2010, 3:42 PM
Setup the markers on the first activation of the map card:



var map = new Ext.Map({
listeners: {
single: true,
activate: function(){
//do stuff with the map.
}
}
});

Trevor.S
11 Aug 2010, 5:31 AM
Thanks for the response once more. I tried what you said and am having the same issue occuring (the marker appearing if you click quickly to the map tab and vanishing). I am quite new to sencha frameworks so I might be using something incorrectly. Below is my map variable.


var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'info',
mapOptions: {
center: position,
zoom: 3,
},
listeners: {
single: true,
activate: function(){
var infowindow = new google.maps.InfoWindow({
content: 'Georgia Tech'
});

var marker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});
}
},
});

Trevor.S
11 Aug 2010, 10:11 AM
Alright, so with some more testing I have found that if the map is the first tab in the set (thus it comes up by default) the marker shows. If the map is located in a different tab, it seems that the marker will not appear. I assume this is a bug, but I still may be doing something incorrectly. Here is my full code that I am using below to test with. It currently works, but if you move mapdemo to a different location in the tab list, you will see it breaks.

see next post

Trevor.S
11 Aug 2010, 10:14 AM
I think I made a mistake previously in the last post (I would edit it, but it says needs to be approved by a moderator so I cannot see it. I believe mapdemo might be missing from the tabpanel completely. It needs to be added by putting "mapdemo," in the TabPanel items list

EDIT* not sure why this got posted with no issue, incase the other does not appear the code is below. Sorry for the spamlike nature of this :\


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


var position = new google.maps.LatLng(39.5, -98.35);
var gatech = new google.maps.LatLng(33.778463,-84.398881);
var mapdemo = new Ext.Map({
title: 'Map',
iconCls: 'user',
mapOptions: {
center: position,
zoom: 3,
},
listeners: {
single: true,
activate: function(){

var infowindow = new google.maps.InfoWindow({
content: 'Georgia Tech'
});

var marker = new google.maps.Marker({
position: gatech,
map: mapdemo.map
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapdemo.map, marker);
});

}
},
});

var nestedList = new Ext.NestedList({
title: 'testing',
iconCls: 'time',
fullscreen: true,
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
},{
text: 'Option A.1.b'
}]
},{
text: 'Option A.2',
customAttribute: 389
}]
},{
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
},{
text: 'Option B.2',
customAttribute: 2390
}]
},{
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
},{
text: 'Option C.2',
customAttribute: 77
}]
}]
});




var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
//animation: {//animations are causing flashing on android
// type: 'slide',
// cover: true
// },
defaults: {
scroll: 'vertical'
},
items: [mapdemo,{
title: 'About',
html: '<h1>Testing</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'
},
nestedList]
});


}
});