Extjs 4.1 - How to display html data within gridpanel

Question

I must display complex data (i show it on a table) and i using xtemplate (i think this is the best way) to display them like

Ext.define('My.Example', {
    extend: 'Ext.Panel'
    , tbar:[{    
        text:'my button'
    }]
    ,tpl: '{data}'
});

but i need embed a grid after table look like

|button|----|
|---table---|
|-----------|
|-----------|
|           |
|---grid----|
|-----------|

What should i do thanks

Answer 1

Use a box layout:

Ext.onReady(function() {

    new Ext.panel.Panel({
        width: 400,
        height: 400,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        tbar: [{
            text: 'Button'
        }],
        items: [{
            flex: 1,
            html: 'Top data'
        }, {
            flex: 1,
            xtype: 'gridpanel',
            store: {
                fields: ['name'],
                data: [{
                    name: 'Item 1'
                }]
            },
            columns: [{
                flex: 1,
                text: 'Name',
                dataIndex: 'name'
            }]
        }]
    });

});