Question

I did a search on the elements of the list, but the problem is that the search field is displayed on a detailed card of the list item.I need to hide search field in detailed card.
I tried to hide it in controller:

showDetail: function(list, record) {
    this.getMain().push({
        xtype: 'recipedetail',
        title: record.fullName(),
        data: record.data
    }),
     this.getMain().getNavigationBar.hide({   
    xtype: 'searchfield',
    itemId:'contact_search'     

      })
        }

And tried to hide it in detail card:

config: {
   ...,
   items: [{
    xtype: 'searchfield',
    itemId:'contact_search',
    hidden: true
    }] 
}

But searchfield still displayed. Errors in code or in the direction of my thoughts?
http://www.senchafiddle.com/#4hKD8#uZlr7#JywGI#3D6PK#DOaF9#oVfK0#jdzF3

Answer 1

There is quite a lot of error in your code to hide the searchbar.

• You for the () at the getNavigationbar function
• The hide function takes an animation or a boolean as a parameter, not the component your want to hide
• You forgot the semi-colon

Now, to hide the searchfield, first add a reference to this searchfield in the config of your controller :

config: {
    refs: {
        main: 'mainpanel',
        searchfield: 'mainpanel searchfield'
    },
    ...

Now you can access your searchfield component with this.getSearchfield(), so you just need to do :

this.getSearchfield().hide();

Hope this helps