PDA

View Full Version : How to Access TabPanel items



alawibh
12 Dec 2011, 4:58 AM
Dears,

I'm new in using Sencha Touch 2, and I create this TabPanel:



var MyPanel;
Ext.application({
name: 'MyyApp',
launch: function() {

MyClientInfo = clsDeviceAjax.GetClientInfo().value;
var MyLogs = clsDeviceAjax.GetClientLogs().value;

var MyViolations = clsDeviceAjax.GetClientViolations().value;
var MyViolationsStr = MyViolations.split("+");

MyPanel = new Ext.TabPanel( {
xtype:'tabpanel',
id: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'MyHome',
scroll: 'vertical',
html: [ "MY HTML" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
// do some
}
}
]
}]
},
{
title: 'History',
iconCls: 'History',
html: [ "MY HTML 2" ]
},
{
id: 'ViolationsTab',
title: 'Violations',
iconCls: 'Violations',
scroll: 'vertical',
badgeText: '6',
html: [ "MY HTML 3" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
// I want to add badgeText to ViolationsTab
}
}
]
}]
},
{
title: 'Map',
iconCls: 'Map',
html: [ "MY HTML 4" ]
}
]
}).setActiveItem(0);
}
});


- In the TabPanel, I add an item with id: 'ViolationsTab'.
- Also, I add dockedItems button with handler fired when button clicked.
- Now, I want when this button clicked, ViolationsTab badgeText set to '10' for example.


How to do that?

mitchellsimoens
12 Dec 2011, 8:52 AM
You should use Ext.create instead of the new keyword to instantiate components.
You should use the actual class name as described in the API docs, not the alternate names. I have seen problems when using the alternate names and things not working 100%.
Right now, there doesn't seem to be a reference on the tab panel item to the associated tab. I entered a bug report for this. What you can do is get the index of the item and then get the item in the tab bar at that index and it should be the associated tab.

alawibh
12 Dec 2011, 10:10 PM
Dear mitchellsimoens,

Thanks a lot for your reply.
I change the creation to:



MyPanel = Ext.create("Ext.TabPanel", { xtype:'tabpanel', id: 'tabpanel', fullscreen: true, tabBarPosition: 'bottom',
.....

But still don't know how to access items or any other methods.
Please, I need an example for setting the badgeText for an item.
Also, need link for tutorial or documentation if available.

Regards,

mitchellsimoens
13 Dec 2011, 6:32 AM
Checkout my #3

alawibh
13 Dec 2011, 6:40 AM
Dear,


What you can do is get the index of the item and then get the item in the tab bar at that index and it should be the associated tab

I don't know how to do this?
Please, help.

Regards,

mitchellsimoens
13 Dec 2011, 6:56 AM
Try to track it down in the API docs... you can do it.


var index = tabpanel.getItems().indexOf(panel),
tabBar = tabpanel.getTabBar(),
item = tabBar.getItems().getAt(index);

Not tested, just typing from my memory.

alawibh
14 Dec 2011, 3:23 AM
Dear mitchellsimoens,

Look at the snapshot for the error console attached, it didn't work.
Now, it seems I cannot go further in my programming with your library :(.

I need to do the following:

- Need to update Tab HTML based on events periodically without refreshing the page again.
- Need to interact with map instance created in one tabs of the panel.
- ....etc.

I can't do anything with my code, since I have no way to get instance from objects created.

Now, is that the end door? no other solution for my problem?
Do I need to re-structure my application to get this problem resolved? and how?
I feel lost and can't move forward.

Regards,

mitchellsimoens
14 Dec 2011, 6:00 AM
This is fully working for me:


var tabpanel = Ext.create('Ext.tab.Panel', {
fullscreen : true,
items : [
{
title : 'One',
html : 'one'
},
{
title : 'Two',
html : 'two'
}
]
});

var panel = tabpanel.getComponent(1),
index = tabpanel.getItems().indexOf(panel),
tabBar = tabpanel.getTabBar(),
item = tabBar.getItems().getAt(index);

console.log(item);

alawibh
19 Dec 2011, 1:37 AM
Dear Mitchellsimoens,

First, thanks a lot for your help.
I spent enough time trying to figure out what the problem is :(, but with no luck.

Your code is working fine, my code is NOT.

Can you tell me what is the problem with my code?

Find Attached:

- No error and Object caught (YouApp.jpg).
- Error and Object didn't (MineApp.jpg).

And here a demo files for both applications:

http://www.2shared.com/file/vGjytFU0/Prob.html

Regards,

alawibh
20 Dec 2011, 4:38 AM
This code is your and it is working:


var MyClientInfo;var tabpanel;
var mapdemo;


function UpdateLatesActions(res)
{
var MyLogs = res.value;
var MyHTML = "Test Add HTML";
document.getElementById("TblContainer").innerHTML = MyHTML;
}


function initialize() {
var position = new google.maps.LatLng(26.23122,50.51097);
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ'
});
mapdemo.map.panTo(position);
//marker.setMap(mapdemo);
//mapdemo.maps.addOverlay(marker);
}


Ext.application({
name: 'MyApp',
launch: function() {
var tabpanel = Ext.create('Ext.tab.Panel', {
fullscreen : true,
items : [
{
title : 'One',
html : 'one'
},
{
title : 'Two',
html : 'two'
}
]
});

var panel = tabpanel.getComponent(1),
index = tabpanel.getItems().indexOf(panel),
tabBar = tabpanel.getTabBar(),
item = tabBar.getItems().getAt(index);


console.log(item);
}
});

This is my code, and it is NOT working:


var MyClientInfo;var tabpanel;
var mapdemo;


function UpdateLatesActions(res)
{
var MyLogs = res.value;
var MyHTML = "Test Add HTML";
document.getElementById("TblContainer").innerHTML = MyHTML;
}


function initialize() {
var position = new google.maps.LatLng(26.23122,50.51097);
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ'
});
mapdemo.map.panTo(position);
//marker.setMap(mapdemo);
//mapdemo.maps.addOverlay(marker);
}


Ext.application({
name: 'MyApp',
launch: function() {


var position = new google.maps.LatLng(37.44885,-122.158592);
infowindow = new google.maps.InfoWindow({
content: 'Sencha Touch HQ'
});

mapdemo = new Ext.Map({
mapOptions : {
center : new google.maps.LatLng(37.381592, -122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},


listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ',
map: map
});


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout( function(){ map.panTo (position); } , 1000);
}
}
});

tabpanel = Ext.create("Ext.tab.Panel", {
xtype:'tabpanel',
id: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'MyHome',
scroll: 'vertical',
html: [ "My HTML 1" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
// function
}
}
]
}]
},
{
xtype: 'list',
title: 'Snapshot',
iconCls: 'Snapshot',
itemTpl: "<b>{title}:</b> {desc}",
store: {
fields: ['title', 'desc'],
data: [
{title: 'Name', desc: "Sencha Name"},
{title: 'Email', desc: "Sencha Email"},
{title: 'Mobile 1', desc: "Sencha Mobile 1"},
{title: 'Mobile 2', desc: "Sencha Mobile 2"}
]
}
},
{
title: 'History',
iconCls: 'History',
html: [ "My HTML 2" ].join("")
},
{
id: 'ViolationsTab',
title: 'Violations',
iconCls: 'Violations',
scroll: 'vertical',
badgeText: "5",
html: [ "<div id='TblContainerV'>My HTML 3</div>" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
//Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
}
}
]
}]
},
{
title: 'Map',
iconCls: 'Map',
layout: 'fit',

items: [mapdemo],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
//Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
//initialize();
}
}
]
}]
}
]
}).setActiveItem(0);

var panel = tabpanel.getComponent(0),
index = tabpanel.getItems().indexOf(panel),
tabBar = tabpanel.getTabBar(),
item = tabBar.getItems().getAt(index);
console.log(item);
}


});

What is the problem?

jemptymethod
28 May 2013, 6:01 AM
You should use Ext.create instead of the new keyword to instantiate components.
You should use the actual class name as described in the API docs, not the alternate names. I have seen problems when using the alternate names and things not working 100%.
Right now, there doesn't seem to be a reference on the tab panel item to the associated tab. I entered a bug report for this. What you can do is get the index of the item and then get the item in the tab bar at that index and it should be the associated tab.



What's the status of the bug report mentioned in #3? We're on Ext 4.1.3 and I just had to spend over a half hour figuring out how to write the following monstrosity:


var tabItem = tab.up('tabpanel').items.getAt(tab.up('tabbar').items.indexOf(tab));

The following convenience methods would obviate such a montrosity:

tabbar.getTabPanel
tab.getTabPanel
tab.getTabBar
tab.getTabItem

mitchellsimoens
28 May 2013, 6:04 AM
If you have the item, there should be a tab property.

jemptymethod
28 May 2013, 6:31 AM
If you have the item, there should be a tab property.

I have the tab not the item.

p_nutz
31 May 2013, 3:06 PM
jees, finally..


listeners: { activeitemchange: function (tabPanel, tab, oldTab) {
Ext.Msg.alert('activeitemchange', 'Current tab: ' + tab.config.title);
}
}

Found the solution here:
http://try.sencha.com/touch/2.0.0/demos/Ext.TabPanel.activeitemchange/viewer.html