How to add a title above a list in extjs /sencha touch

Question

I want to add a title above a list in extjs / sencha touch.

The title will be dynamic and change according to the page as it will contain the page number and other details. Because of this I have amended my handler which updates the list with new results, so that as as well a list of results getting added to my dealerList card, it also adds a container:

myapp.cards.dealerList.items.add(
     new Ext.Container({
         html: "Dealer results",
         cls: "centered-title",
         baseCls: "x-toolbar-title",
         scroll: false,
         layout: {
             type: "hbox",
             align: "stretch"
         }
     }),
     new Ext.List({ ...
     })
 )

However when I check it, only the ext.list is displayed, no container above it. Note, I don't want a toolbar. There are also no errors in chrome.

Here is my dealerList card:

myapp.cards.dealerList = new Ext.Panel({
    scroll: false,
    layout: {
        type: "vbox",
        align: "stretch"
    },
    id: "dealer-list-results-card",
    dockedItems: [myapp.toolbars.dealerList, myapp.toolbars.dealerListNav],
})

---

Edit 1: Here are the main config parameters for the list:

{
    flex: 1,
    layout: {
        type: "fit",
        align: "stretch"
    },
    id: "results-list",
    singleSelect: true,
    scroll: "vertical",
}

---

Edit 2: I have made a discovery. If I get rid of the list then the container appears. On a related noted I can't seem to get more than one item to appear using myapp.cards.dealerList.items.add() , even if I call the function twice and only load it with one argument.

Answer 1

What you have to know is that Ext.List component superclass is no more Ext.Panel but Ext.DataView . For this reason you can not not directly dock components on your list, in fact, if you take a look at the Ext.List source code, you will see, inside the initComponent function, the following lines of code:

if (Ext.isDefined(this.dockedItems)) {
    console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}

So, exaclty like this warning tell you, I suggest you do "wrap" your List component inside an Ext.Panel on which you fill set the layout config as 'fit' , then, you dock an Ext.Toolbar on the top of this panel (not to the list). In this way, you can always change the toolbar title according to your needs by simple calling the setTitle function. Remember, that all the Sencha Touch components customizables, so if you want to give different styles to this toolbar, I suggest you to use the componentCls config.

I post you a simple example that show you how to do that:

Ext.regApplication('EditableListSample.', {
    launch: function() {

    //Definition of the store Data Model
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });

    //Definition of the List Store
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'}
        ]
    });

    //Definition of the wrapper panel
    var viewport = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        items: [{
            //Definition of the list
            xtype: 'list',
            itemTpl: '{firstName} {lastName}',
            store: store,
            listeners: {
                itemtap: function(list, index){
                    //Updating the toolbar title
                    var firstName = list.getStore().getAt(index).get('firstName');
                    viewport.getDockedComponent('tbrListTitle').setTitle(firstName);
                }
            }
        }],
        dockedItems: [{
            //Definition of the custom toolbar
            xtype: 'toolbar',
            itemId: 'tbrListTitle',
            dock: 'top'
        }]
    });
}
});

Hope this helps.

Answer 2

This is how I added a custom title to a scrollable list. But be careful to destroy the title and remove the list if you plan to use the same list and store (this depends on how you implemented your app).

searchStore.load({


    callback: function(records){
        if(records.length > 0){
            var searchList = Ext.get('search-list'),

                firstRow = searchList.select('div.x-list-item').elements,
                html = item[0].outerHTML;

            item[0].outerHTML = 'div id="search-list-title" style="width: 100%;text-align: center;text-decoration: underline;">' + 'List Title: '/div>' + html;

        }
}


});

Removing title and clearing list where necessary:

var listTitle = Ext.fly('search-list-title');

    if(listTitle){
        listTitle.destroy();
    }
    var clearSearchStore = Ext.getStore('Search');
    clearSearchStore.removeAll();