На прошлом уроке мы разобрали создание тулбаров для окон. Поверхностно конечно же, но достаточно чтобы понять принцип построения окон. Итак, чем же мы займемся сейчас? А разберем мы сейчас свойства окна сворачиваться, расширяться и т.п. Тут мы будем продолжать расширять наш класс WINDOW, так что если перескочили через урок, вернитесь в прошлый и просмотрите листинги. Вот код функции для нашей следующей кнопки:
showResizable:function(){
params = this.extend(this.params, {
// Наши уже используемые ранее объекты баров
tbar:this.toolbar,
bbar:this.bbar,
fbar:this.fbar,
// Новые параметры:
resizable: true, // Можно изменять размеры окна
collapsible: true, // Можно схлопывать/расхлопывать окно
minimizable: true, // Можно минимизировать окно
maximizable:true // Можно максимизировать окно
})
this.show(params);
}
Разберем детально все новые параметры, хотя наверняка для многих тут итак все понятно.
Во-первых, сразу отметим что не считая параметра resizable, все эти параметры влияют на наличие или отсутствие соответствующих функциональных кнопок в верхнем правом углу окна. К примеру, если мы укажем closable: false , у нас исчезнет крестик, закрывающий окно при клике и если не будет других кнопок для закрытия окна (или навешано каких-нибудь событий, по которым окно закрывалось бы), окно будет считаться не закрываемым.
resizable: true . По умолчанию true, так что в нашем случае мы ничего не меняем. Но если бы мы поставили false, изменять размеры окна уже нельзя было бы.
collapsible: true . Указывает на то, что окно схлопываемое.
minimizable: true . Вот тут нюанс есть. true указывает на то, что окно может быть минимизировано и появляется соответствующая кнопка, но само по себе наличие кнопки еще не говорит о том, что окно будет минимизироваться при клике по кнопочке. Для этого нужно навешать соответствующий листнер и обработчик, и указать область куда будет сворачиваться окошко при клике на кнопку. Честно сказать еще некогда было детально поковыряться и разобраться как все это работает, но обязательно это сделаю. А кому очень интересно и не втерпешь, могут залезть в примеры, там есть пример Десктопа, вот в примере можно этот вопрос и разобрать, если знания позволяют.
maximizable:true . Тут все проще. Поставьте true и будет вам счастье :-)
А теперь навешаем еще несколько фишек на окошко. Вообще если изучать окна очень тщательно, это займет очень много времени, по этому мы этого делать не будем. Я считаю что на львиную часть задач достаточно и этих знаний. Итак, листинг.
<script type="text/javascript">
tools:function(){
return [
{
id:'print',
handler:function(){
WINDOW.click_('Печать');
}
},{
id:'refresh',
handler:function(){
WINDOW.click_('Обновить');
}
},{
id:'search',
handler:function(){
WINDOW.click_('Поиск');
}
}]
},
onEsc:function(){
Ext.Msg.confirm(
'Подтверждение закрытия',
'Вы нажали Esc. Мне закрыться? :-(',
function(act){
if(act == 'yes') WINDOW.win.close();
}
);
},
showWithTools:function(){
tabPanel = new Ext.TabPanel({
activeTab: 0,
defaults:{
bodyStyle:{
padding:'5px'
}
},
items:[{
title:'Первая вкладка',
html:'<h2>HTML, размещенный в панели 1</h2>'
},{
title:'Вторая вкладка',
html:'<h2>HTML, размещенный в панели 2</h2>'
},{
title:'Третья вкладка',
html:'<h2>HTML, размещенный в панели 3</h2>'
}]
});
listeners = this.extend(this.getParams().listeners,{
show:function(){
alert('Окно открыто');
},
resize:function(){
var win = WINDOW.win;
if(win.isVisible())alert(
'Размеры окна были изменены. Размеры окна: ' +
win.getWidth() +' на '+ win.getHeight()+' пикселов.'
);
},
close:function(){
WINDOW.win = false;
alert('Окно закрыто');
}
});
params = this.extend(this.getParams(), {
// Наши уже используемые ранее объекты
tbar:this.toolbar,
bbar:this.bbar,
fbar:this.fbar,
tools: this.tools(),
onEsc:this.onEsc,
listeners: listeners,
items:[tabPanel]
})
this.show(params);
}
<script>
<input name="button" type="button" onclick="WINDOW.showWithTools();" value="Открыть окно с разными фишками" />
Что мы тут имеем?
1) Наша пользовательская функия tools. Возвращает массив элементов, которые мы передадим нашему окну в качестве параметра tools. Вообще интересный и богатый инструмент. Советую в документации ознакомиться детально с этим моментом. Приведу только скрин, чтобы сразу стало ясно что это такое и зачем оно надо.
tools.jpg — изображение пока не получено из архива
Как вы видите, это набор предустановленных популярных кнопок. Достаточно в конфигурации каждой кнопочки прописать нужный handler.
2) onEsc. Функция, срабатываемая при нажатии на кнопку Эскейп. Иногда очень нужная фишка. Нажмите и гляньте что происходит в нашем случае ;-)
3) tabPanel = new Ext.TabPanel({...
Создаем ТабПанель с необходимым набором вкладок. Каждая вкладка представляет из себя отдельный объект Ext.Panel (вкладки перечислены в теле массива items нашей ТабПанели. По умолчанию xtype объектов ТабПанели - panel , то есть Ext.Panel). Тут важно понимать что вы создаете ТабПанель, но каждый ее элемент - Панель, полностью независимый элемент. То есть если вы хотите управлять вкладкой, вы должны обращаться не к ТабПанели, а именно к нужной вам панели. Легче всего любому необходимому вам объекту сразу задать id в качестве параметра, а обращаться к этому объекту посредством метода Ext.getCmp(elID), который возвращает ссылку на объект по его id.
Отметим так же параметр ТабПанели activeTab. Через него мы указываем какую вкладку открыть первой при рендеренге ТабПанели. Если мы пропустим этот параметр, ни одна вкладка не будет на переднем плане по умолчанию.
4) Плюс ко всему мы подвесили еще несколько листнеров на открытие окна, закрытие и ресайз его.
Вообще соглашусь со многими что как-то это все не предметно, но у нас тут не узкопрофильное окно под заказ. Мы тут пробуем поиграться, прощупать свойства окон, посмотреть что с ними можно выполнять в принципе. А когда вы все это освоите, вот тогда вы и будете создавать предметные окна под свои нужды.
А в следующем уроке я хотел коснуться менеджеров окон, которые используются для управления несколькими окнами, но пока не буду этого делать, а то наверно многим становится скучно, ибо окна не самый интересный момент в Экста. А в следующем уроке я коснусь Хранилищ и Гридов (таблиц). Вот это действительно захватывающий и мощный инструмент!