Extjs 4.1-如何在gridpanel中显示html数据

我必须显示复杂的数据（我将其显示在一个表上），我使用xtemplate（我认为这是最好的方式）来显示它们

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

但我需要在表格后面嵌入一个网格

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

我该怎么办？谢谢

使用方框布局：

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'
            }]
        }]
    });

});

---

我尝试更改html，如：panel.items.items[0]。value='new data'；但不起作用？