CardLayout

Компоновка CardLayout позволяет разместить элементы по типу слайдов - каждая слайд располагается поверх другого, и единовременно виден только один слайд. Но мы модем переключать слайды как вперед, так и назад.

Ext.onReady(function(){
var panel= Ext.create('Ext.Panel', {
            title: 'Слайды писателей',
			width: 400,
			height: 200,
			layout:'card',
            items: [
				{
					xtype: 'panel',
					title: 'Л. Толстой',
					html: 'Произведения Л. Толстого: "Война и мир", "Воскресение", "Крейцерова соната"'
				},
				{
					xtype: 'panel',
					title: 'Ф. Достоевский',
					html: 'Произведения Ф. Достоевского: "Преступление и наказание", "Братья Карамазовы", "Идиот"'
				},
				{
					xtype: 'panel',
					title: 'И. Тургенев',
					html: 'Произведения И. Тургенева: "Отцы и дети", "Рудин", "Вешние воды"'
				}],
				bbar: ['->', {
					xtype: 'button',
					text: 'Предыдущее',
					handler: function(but){
						var layout=panel.getLayout();
						if(layout.getPrev()){
							layout.prev();
						}
					}
				}, {
					xtype: 'button',
					text: 'Далее',
					handler: function(but){
						var layout=panel.getLayout();
						if(layout.getNext()){
							layout.next();
						}
					}
				}],
			renderTo: Ext.getBody()
        });
 });

Значение layout:'card' задает компоновку в виде слайдов - тем самым мы применяем к контейнеру класс Ext.layout.container.Card.

Все слайды у нас определены в свойстве items и представляют дочерние элементы панели.

Затем после определения логики переключения между слайдами мы используем параметр bbar для создания панели навигации из двух кнопок.