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

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - Уже существующий грид отобразить в уже существующей панели (https://javascript.ru/forum/extjs/8035-uzhe-sushhestvuyushhijj-grid-otobrazit-v-uzhe-sushhestvuyushhejj-paneli.html)

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

Существует такой грид и такой 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, но я не нашёл такого в документации.

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

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

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

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

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

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

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

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

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', то всё нормально.

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

А, doLayout() забыл.