Question

By the default list does not have titleBar, but when I create a list in such a way it has an empty titleBar

Ext.define('Application.view.RecipeList', {
    extend: 'Ext.List',
    xtype: 'recipelist',
    requires: ['Application.store.Recipes'],
    id:'list',   
    config: {             
        grouped: true,
        itemTpl: '{title}',
        store: 'Recipes',
        onItemDisclosure: true
    }
});

Can somebody help me to understand how to hide titleBar?

Answer 1

The empty bar is actually your navigation bar.

If you want to hide it you just need to set the navigationBar to false in your mainpanel

Update

config: {
    navigationBar: false, 
    items: [{
        xtype: 'recipelist',
    }]
}

Update

Here’s how to add the searchbar in your navigationbar

this.getMain().getNavigationBar().add({
    xtype: 'searchfield',
    itemId:'contact_search',
    placeHolder: 'Search....',
    listeners: {
        scope: this,
        clearicontap: this.onSearchClearIconTap,
        keyup: this.onSearchKeyUp
    }
});

But then you need to hide it when you switch to the detail card, but I’ll let you figure out how to do that.