Уже существующий грид отобразить в уже существующей панели

[WalterScott]

Существует такой грид и такой layout:

var grid = new Ext.grid.GridPanel({
			    frame:true,
			    title: 'Movie Database',
			    height:200,
			    width:800,
			    store: store,
			    columns: [
				{header: "Cover", renderer: cover_image},
			    {header: "Title", dataIndex: 'title', renderer: title_tagline, sortable: true},
			    {header: "Director", dataIndex: 'director'},
			    {header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('d.m.Y')},
			    {header: "Genre", dataIndex: 'genre', renderer: genre_name},
			    {header: "Tagline", dataIndex: 'tagline'}
			    ]
			});

var viewport = new Ext.Viewport({
				  layout: 'border',
				  renderTo: Ext.getBody(),
				  items: [{
				     region: 'north',
				     xtype: 'panel',
					 collapsible: true,
				     html: 'North'
				  },{
				     region: 'west',
				     xtype: 'panel',
				     split: false,
				     width: 200,
					 collapsible: true,
				     html: 'West'
				  },{
					 region: 'center',
					 xtype: 'panel',
					 collapsible: true,
				  },{
				     region: 'east',
				     xtype: 'panel',
				     split: false,
				     width: 200,
					 collapsible: true,
				     html: 'East'
				  },{
				     region: 'south',
				     xtype: 'panel',
				     html: 'South'
				  }]
			});

Нужно вставить грид в панель, помещенную в region: 'center'.
Для этого нужно, как я понимаю, свойству renderTo грида присвоить идентификатор панели:

var grid = new Ext.grid.GridPanel({
			    renderTo: идПанели,
                            ...

А как задать этот идентификатор?

Другой вариант в contentEl панели поместить идентификатор грида:
{
region: 'center',
xtype: 'panel',
collapsible: true,
contentEl: идГрида
}
Но опять же, как его задать?
Я надеялся, что прокатит такое:
contentEl: grid

Но так не работает. Видимо можно при создании элемента, указать у него какое-то свойство, значение которого потом можно указать в renderTo или contentEl, но я не нашёл такого в документации.

[Kolyaj]

viewport.add(grid);

[WalterScott]

Эффект тот же, как если бы я написал

var grid = new Ext.grid.GridPanel({
	renderTo: document.body,

Грид выводится поверх всего независимо от layout-а.
А надо чтобы он был внутри этого
{
region: 'center',
xtype: 'panel',
collapsible: true
}

[Kolyaj]

{
region: 'center',
xtype: 'panel',
collapsible: true,
id: 'someId',
layout: 'fit'
}

Ext.getCmp('someId').add(grid)

Типа такого, например.

[WalterScott]

Так заработало.
Спасибо!

[lazy fish]

А не подскажете, почему аналогично не вставляется в панель дерево?

var treeLoader = new Ext.tree.TreeLoader({
			dataUrl: 'get-nodes.php'
		});
		var rootNode = new Ext.tree.AsyncTreeNode({
		    text: 'Root'
		});
		var tree = new Ext.tree.TreePanel({
		    loader: treeLoader,
		    root: rootNode
		});
		var viewport = new Ext.Viewport({
			layout: 'border',
			renderTo: Ext.getBody(),
			items: [{
				region: 'north',
				xtype: 'panel',
				collapsable: true
			},{
				region: 'center',
				xtype: 'panel'
			},{
				region: 'west',
				xtype: 'panel',
				id: 'treecontainer',
				layout: 'fit',				
				width: 300
			},{
				region: 'east',
				xtype: 'panel',
				width: 300
			}]
		});
		Ext.getCmp('treecontainer').add(tree);

Никаких ошибок не выдаётся, но и дерево не появляется.

Если помещать дерево в див через renderTo: 'divId', то всё нормально.

[lazy fish]

Если инициализировать дерево через xtype: 'treepanel', то тоже всё нормально. Просто уже созданный TreePanel тоже должен как-то вставлятся.
Правда, пишут, что xtype всегда предпочтительней, потому что такая инициализация ленивая. Если мы, допустим, ни разу не открыли вкладку, на которой то же дерево, то его объект ни разу не создастся.

[lazy fish]

А, doLayout() забыл.