Docked button not positioning correctly

[parky128]

Hi,

I have a problem with a docked tabbar button not appearing docked to the right of two tabs I have currently displayed. Instead, the button is appearing directly on top of my 'Map' tab.

The only css file I have included in my mark up is the sencha-touch one.

Script code I have right now is dislayed below...


Ext.ns("PPMobi");

PPMobi.workspace = function() {
var unitStore, map, timeline, panel;

var bounds = new google.maps.LatLngBounds();
//TO-DO: Define this elsewhere
var Unit = Ext.regModel('Unit', {
fields:[
'UntID',
'UnitName',
'Location',
'Lat',
'Lon',
{name:'LastUpdateDTUTC', type: 'date'},
'MapIcon'
]
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<h2><img src="Images/MapIcons/{MapIcon}.gif" />{UnitName}</h2>',
'<div>',
'<h3>{Location}</h3>',
'<h5>as of: {LastUpdateDTUTC}</h5>',
'</div>',
'</div>',
'</tpl>'
);

return {
init : function() {
this.buildStore();
},

buildStore: function() {

unitStore = new Ext.data.Store({
autoLoad: true,
model: "Unit",
proxy: {
type: 'ajax',
url : 'GetData.ashx',
reader: {
type: 'array',
root: 'data',
idProperty: 'UntID'
}
},

listeners: {
'load': function() {
this.buildUI()
}, scope:this
}
});

unitStore.sort('LastUpdateDTUTC', 'DESC');
},

buildUI : function() {

map = new Ext.Map({
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 12
}
});

timeline = new Ext.List({
title: 'Detail',
store: unitStore,
scroll: 'vertical',
cls: 'unitList',
tpl: tpl,
autoHeight:true,
itemSelector: 'div.unit',
singleSelect: true
});


panel = new Ext.TabPanel({
fullscreen: true,
animation: 'slide',
items: [map, timeline]
});

var tabBar = panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
handler: this.buildStore()
});

unitStore.each(this.addMarker);
map.map.fitBounds(bounds);

},

addMarker: function(r) {
var position = new google.maps.LatLng(r.data.Lat,r.data.Lon);

var marker = new google.maps.Marker({
map: map.map,
position: position,
title : r.data.UnitName,
icon: "Images/MapIcons/"+r.data.MapIcon+".gif"

});

bounds.extend(position);
}

};
}();

Ext.onReady(PPMobi.workspace.init, PPMobi.workspace);

Can anyone tell me what I'm doing wrong please?

Thanks, Rob

[evant]

Ext.setup({
onReady: function(){
var tabs = new Ext.TabPanel({
fullscreen: true,
items: [{
title: 'A'
},{
title: 'B'
}]
});

tabs.getTabBar().add([{
flex: 1
},{
xtype: 'button',
text: 'Foo'
}]);
tabs.getTabBar().doLayout();
}
});

[parky128]

Hi Evan,

That sorts this for me, but why is that you are not using the addDocked method? Does it only work for certain situations?

Rob