How to Access TabPanel items

[alawibh]

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]

1. You should use Ext.create instead of the new keyword to instantiate components.
2. 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%.
3. 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]

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]

Checkout my #3

[alawibh]

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]

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]

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]

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]

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]

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?