1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Question How to Access TabPanel items

    How to Access TabPanel items


    Dears,

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

    PHP Code:
    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',            
                
    fullscreentrue,
                
    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default How?

    How?


    Dear mitchellsimoens,

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

    PHP Code:
            MyPanel Ext.create("Ext.TabPanel", {            xtype:'tabpanel',            id'tabpanel',                        fullscreentrue,            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,

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Checkout my #3
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    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,

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Try to track it down in the API docs... you can do it.

    Code:
    var index = tabpanel.getItems().indexOf(panel),
        tabBar = tabpanel.getTabBar(),
        item = tabBar.getItems().getAt(index);
    Not tested, just typing from my memory.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    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,
    Attached Images

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is fully working for me:

    Code:
    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);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    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,
    Attached Images

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    This code is your and it is working:

    Code:
    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:

    Code:
    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?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi