Sencha Touch: Hide a toolbar button in nested lists?

Question

I have the following Sencha App Nested List which comprise of a toolbar button.

enter image description here

Whenever I click on any list item, I need to remove the Button which says "Tab Bar" in the lists which follows. As you can see, the button is still there which I need to remove.

enter image description here

Heres my view code

Sencha View Folder

Main.js

Ext.define('firstApp.view.Main', {
extend : 'Ext.Container',
xtype : 'main',
requires: [
              'Ext.TitleBar',
              'Ext.Button',
              'firstApp.model.item',
              'firstApp.store.nList',
              'Ext.dataview.NestedList',
              'Ext.data.TreeStore'
              //'Ext.ToolBar'
              ] ,
config : {
    fullscreen : true,
    layout : 'fit',
    items : [{
        xtype : 'nestedlist',
        title: 'List View',
        displayField : 'text',
        store : 'nList',
        //toolbar:{
        toolbar:{
            items :[
                             {
                               xtype : 'spacer'
                              },
                             {
                               xtype : "button",
                               text : 'Tab View',
                               align: 'right',
                               ui : "action",
                               handler: function(){                    
                                          Ext.Viewport.animateActiveItem((
                                          Ext.create('firstApp.view.view2')),
                                          {type: 'slide', direction:'left'}).show();
                                                   }
                             }
                      ]
                   }
                }
           ]
     }
});

How should I go about it? Kindly Help me out

@SudipPal the name of the button is Tab View... I have attached the snap shot as well... What i need to do is to hide this button when I am in the sub-menu of my nested list. I believe you could make out what I am trying to ask by going through the question and snapshot. — madLokesh
Is there any other view available for your Sub Menu list items? Like viewport or view2.. kindly paste that code as well... — Sudip Pal
I have mention a link at the bottom of my question "Complete Code Here" which is the complete code of the demo I am developing @SudipPal — madLokesh
Sorry, I missed it. Well it's preaty much time consuming work, because the code used one config view (toolbar), I have initially added a listner to track when the master list is clicked, so..paste this code > listeners: { itemtap: function (list, index, item, record) { console.log("itemtap : "+list+index+item+record); } }, in your main.js file after store:'nList'. Maintain the commas. If I'll get some time to look into this tonight, I'll get back to you with complete solution. — Sudip Pal

1Mayur 1Mayur · Accepted Answer · 2013-02-25T12:59:36

http://www.senchafiddle.com/#33NZD

Here you go Pal..

What I did

Assigned an Id to you "Tab View Button"
Added 2 listeners to you nested list
itemtap will get the button by id and will hide it and
back will get the button by id and will show it

here is the code

Gave Id to button

xtype : "button",
                        id: "btnTabView",
                        text : 'Tab View',
                        align: 'right',
                        ui : "action",
                        handler: function(){                    
                            Ext.Viewport.animateActiveItem((
                                Ext.create('firstApp.view.view2')),
                                                           {type: 'slide', direction:'left'}).show();
                        }

Listeners to you nested list

displayField : 'text',
store : 'nList',
listeners: {
    back: function( nList, node, lastActiveList, detailCardActive, eOpts ){
        if(node.getDepth() == 1){
            Ext.getCmp('btnTabView').show();
        }
    },
    itemtap: function( nList, list, index, target, record, e, eOpts ){
            Ext.getCmp('btnTabView').hide();
    }
},

Sencha Touch: Hide a toolbar button in nested lists?

1 Answers