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
для создания панели навигации из двух кнопок.