Window с разным содержимым
 

Прошу помощи. Есть окно window у которого есть панель управления. Как сделать так чтобы по нажатию кнопки на панели в окне открылась таблица? А если таблиц несколько нужно показывать при нажатии на разные кнопки в тулбаре как быть?

код приложения:

Ext.onReady(function()
	{
	
		  /**********************/
		 /* Таблица Сотрудники */
		/**********************/
		var store = Ext.create('Ext.data.JsonStore', 
			{
				fields:['id','F','I','O','Job'],
				PageSize:10,
				autoLoad: true,
				proxy:
					{
						type:'ajax',
						url:'php2.php?func=1',
						reader:
							{
								type: 'json',
								root: 'table'
							}
					}
			});
		
		var grid1 = Ext.create('Ext.grid.Panel', 
			{
				title: 'Справочник сотрудников',
				store: store,
				columns:
					[
						{text:'№', dataIndex:'id', width:50},
						{text:'Фамилия', dataIndex:'F', width:150},
						{text:'Имя', dataIndex:'I', width: 150},
						{text:'Отчество', dataIndex:'O', width: 150},
						{text:'Подразделение', dataIndex:'Job', width: 350},
					],
				/* Нижний тулбар таблицы*/
				bbar: new Ext.PagingToolbar(
					{
						store: store,
						displayInfo: true,
						displayMsg: 'Показано  {0} - {1} из {2}'
					})

			});
		
		
		  /***************************/
		 /* Главное окно приложения */
		/***************************/
		var win1 = Ext.create('widget.window', 
			{
				title:'Рыжая база v.1.0b',
				html:'',
				autoShow:true,
				closable:false,
				resizable:false,
				draggable:false,
				maximized:true,
				layout: 'border',
				//items:[{region: 'north',xtype: 'panel',html: 'North',height:'100%',items[grid1]}],
				
				tbar:
					[
						{text:'Регистрация', handler: function(){alert('Функция пока не работает')}},'-',
						{text:'Справочники',
							menu:
								[
									{text: 'Сторонние организации', handler: function(){win1.update(win1.items.html = grid1)}},
									{text: 'Сотрудники', handler: function(){win1.update(html='1')}},
									{text: 'Исполнители', handler: function(){alert('Функция пока не работает')}},
									{text: 'Местонахождения', handler: function(){alert('Функция пока не работает')}},
									{text: 'Носители', handler: function(){alert('Функция пока не работает')}},
									{text: 'Типы документов', handler: function(){alert('Функция пока не работает')}},
									{text: 'Наименования внутренних документов', handler: function(){alert('Функция пока не работает')}},
									{text: 'На кого распространяются', handler: function(){alert('Функция пока не работает')}}
								]
						},'-',
						{text:'Выбор организации', handler: function(){alert('Функция пока не работает')}},'-',
						{text:'Сервис',
							menu:
								[
									{text: 'Экспорт журналов в MS Excel', handler: function(){alert('Функция пока не работает')}},
									{text: 'Организации', handler: function(){alert('Функция пока не работает')}},
									{text: 'Пользователи', handler: function(){alert('Функция пока не работает')}},
									{text: 'О Программе', handler: function(){alert('Программа разработана сотрудниками сектора программного обеспечения ')}}
								]
						},'-',
						{text:'Выход', handler: function(){alert('Если вы хотите выйти то просто закройте браузер :-))')}}
						
					],
					
				bbar:[{text:'Нижний тулбар'}],
				
			}); 
		
		
		
	});

Например, использовать в окне card layout и переключаться на нужную карту по кнопке.

как в layout засунуть grid?

С этим разобрался

layout: 'card',
				items:
					[
						{xtype: 'panel',html: ''},
						{xtype: 'panel', items:[grid1]},
						{xtype: 'panel',html: '3'},
					],

Как теперь переключаться между нужными слайдами?

вот неплохой пример:
http://docs.sencha.com/extjs/4.2.2/e...t-browser.html

panel.getLayout().setActiveItem(item);

Огромное Вам спасибо! У меня все получилось.

Вот кусок кода:

layout: 'card',
				activeItem: 0,
				items:
					[
						{id:'0', xtype:'panel', html: '0'},
						{id:'1', xtype:'panel', items:[grid1]},
						{id:'2', xtype:'panel', html: '2'},
					],
				
				tbar:
					[
						{text:'Регистрация', handler: function(){alert('Функция пока не работает')}},'-',
						{text:'Справочники',
							menu:
								[
									{text: 'Сторонние организации', handler: function(){win1.getLayout().setActiveItem('1')}},
									{text: 'Сотрудники', handler: function(){win1.getLayout().setActiveItem('2')}},
									{text: 'Исполнители', handler: function(){win1.getLayout().setActiveItem('0')}},

Мне кажется, у вас есть избыточная вложенность. Вместо
{id:'1', xtype:'panel', items:[grid1]}

можно просто написать grid1:

{id:'0', xtype:'panel', html: '0'},
grid1,
{id:'2', xtype:'panel', html: '2'}

Еще момент - рекомендуется юзать itemtId вместо id если данный компонент не должен быть доступен глобально по всему приложению. А если таки должен, то с большой вероятностью у вас проблема с архитектурой.

Просто grid1 не заработало, к сожалению

c itemid тоже не работает.

А что именно не заработало? Рискну предположить что при создании грида вы не описали его айди, и теперь не можете его активировать: win1.getLayout().setActiveItem('1'). Напишите тогда в нем itemId: 1. Или не создавайте грид где то в другом месте, используйте конфиг по полной программе:

{id:'0', xtype:'panel', html: '0'},
{itemId: "1", xtype:"gridpanel", ...},
{id:'2', xtype:'panel', html: '2'}

Да вы были абсолютно правы, я не присвоил itemId и grid1 стал вызываться, благодарю за помощь.