Load another page with TabPanel

[Everio]

app.Messages = new Ext.TabPanel({
    cls: 'cards',
    tabBar: {
        dock: 'bottom',
        ui: 'light',
        layout: {
            pack: 'center'
        }
    },
    ui: 'light',
    animation: {
        type: 'slide',
        cover: true
    },
    defaults: {
        scroll: 'vertical',
    },
    items: [{
        title: 'About',
        html: '<p>eeee</p>',
        iconCls: 'info',
        cls: 'card'
    },
    {
        title: 'Favorites',
        html: 'Favorites Card',
        iconCls: 'favorites',
        cls: 'card',
    }],
    
}) 

With this code, I load html code for each item, but I want to load a new Panel or news elements and not only html. How do I do ?

[evant]

Use the items configuration, let's say you want to a carousel as a tab item:

new Ext.TabPanel({
    fullscreen: true,
    items: [{
        xtype: 'carousel',
        items: [{
            html: 'First item'
        },{
            html: 'Second item'
        }]
    }]
});

[Everio]

But I want to add several items in a tabBar
I try this :

var liste1 = new Ext.List({
    title: 'About',
    iconCls: 'info',
        cls: 'card',
    data:[
        {name:'mike', age:34},
        {name:'jack', age:12}
    ]
});
        
var liste2 = new Ext.List({
    title: 'Test',
    iconCls: 'info',
        cls: 'card',
    data:[
        {name:'paul', age:23},
        {name:'john', age:24}
    ]
});

app.Messages = new Ext.TabPanel({
    cls: 'cards',
    tabBar: {
        dock: 'bottom',
        ui: 'light',
        layout: {
            pack: 'center'
        }
    },
    ui: 'light',
    animation: {
        type: 'slide',
        cover: true
    },
    defaults: {
        scroll: 'vertical',
    },
    items: [{
        xtype: 'list',
        items:[liste1,liste2]
    }]
    
}) 

I want 2 page in my Tabbar with inside each list.
(sorry for my english, I'm french)

[evant]

new Ext.TabPanel({
    items: [{
        title: 'List 1',
        xtype: 'list',
        // ....
    },{
        title: 'List 2',
        xtype: 'list',
        // ....
    }]
});

[Everio]

I try this, I see tabBar but I cant see lists :

app.Messages = new Ext.TabPanel({
    cls: 'cards',
    tabBar: {
        dock: 'bottom',
        ui: 'light',
        layout: {
            pack: 'center'
        }
    },
    ui: 'light',
    animation: {
        type: 'slide',
        cover: true
    },
    defaults: {
        scroll: 'vertical',
    },
    items: [{
        xtype: 'list',
        title: 'Test',
        iconCls: 'info',
        cls: 'card',
        data:[
            {name:'paul', age:23},
            {name:'john', age:24}
        ]
    },{
        xtype: 'list',
        title: 'About',
        iconCls: 'info',
        cls: 'card',
        data:[
            {name:'mike', age:34},
            {name:'jack', age:12}
        ]
    }]
    
}); 

[evant]

Because you haven't specified a template, or an itemSelector for either list.

[Everio]

Thanks you it's work.

[Everio]

And if I want to load my lists dynamically with Ext.util.JSONP.request, I dont find public event to execute this.

[evant]

The store has a loadData method or you can use a store with a scripttag proxy.

[Everio]

And last question, I dont see how I cant load another page when I select an element in my list.