Урок 3. Окна, часть вторая

На прошлом уроке мы познакомились с окнами. Сейчас хотелось бы несколько рассмотреть некоторые свойства окон. Их на самом деле очень много и далеко не все я и сам еще изучил. Но тем не менее мы познакомимся с некоторыми из них. Итак, что же тут имеется?

 

1) В предыдущих примерах мы уже видели что у кона могут быть перечислены различные элементы (параметр items), а так же кнопки окна (параметр buttons). Есть у окна еще несколько базовых компонентов, таких как tbar (toolBar) , bbar (bottomBar) и fbar (footerBar , то есть вообще bottomBar )) ). Со всеми этими компонентами вы конечно же можете детально ознакомиться в документации. Кстати, обратите внимание что эти параметры вовсе не являются полностью оконными сугуболичными компонентами. На самом деле это независимые компоненты Panel, просто это все сделано для удобства, чтобы было проще окна конфигурить. Вот сейчас попробуем создать окошко с этими всякими Барами. Честно сказать мне надоело уже копипастить блоки кода, потому я создам объект и буду его постепенно расширять, а вы, если еще не кодите объектами, уделите, плиз, внимание изучению данного вопроса.

 

Итак вот листинг нашего основного объекта (дальше он будет расширяться).

 

 

<script type="text/javascript">
// Наш основной объект окна
WINDOW = {
	// Базовые параметры, чтобы не копипастить их постоянно
	getParams:function(){
		return {
			width: 500,
			height: 400,
			title: 'Окошечко',
			layout: 'fit',
			bodyStyle:{
				padding: '5px',
				'background-color': '#FFFFFF'
			},
			listeners:{		// Прослушиватели на события
				close:function(){		// На закрытие окна 
					WINDOW.win = false;	
				}	
			},
			modal: true
		}	
	},
	
	// Выводим окно
	show: function(params){ 
		if(!this.win){ 
			this.win = new Ext.Window(params? params : this.getParams());	
		}
		this.win.show();
	},
	
	// Расширяем имеющиеся параметры 
	extend: function(obj, addsParams){
		// Каждый элемент добавляемого объекта прибавляем к имеющемуся 
		for(var i in addsParams){
			obj[i] = addsParams[i];	
		}
		return obj;
	},
	
	click_: function(text){
		alert('Нажали кнопку '+text);
	},
	
	// Тулбар
	toolbar:{
		items:[{
			text:'Добавить',
			icon: 'images/icons/fam/add.png',
			handler:function(){
				WINDOW.click_('Добавить');	
			}
		},{
			text:'Удалить',
			icon: 'images/icons/fam/delete.gif',
			handler:function(){
				WINDOW.click_('Удалить');	
			}
		}]
	},
	
	// Получаем окно с туллбаром
	showToolbar: function(){
		params = this.extend(this.params, {
			tbar:this.toolbar
		})
		this.show(params);
	}
}
</script>

 

 

 

Что мы тут имеем? Вот наш тулбар:

 

 

toolbar:{
		items:[{
			text:'Добавить',
			icon: 'images/icons/fam/add.png',
			handler:function(){
				WINDOW.click_('Добавить');	
			}
		},{
			text:'Удалить',
			icon: 'images/icons/fam/delete.gif',
			handler:function(){
				WINDOW.click_('Удалить');	
			}
		}]
}

 

 

По сути это объект Panel, в которм перечислены элементы. Элементы в данном случае по умолчанию используются Ext.Button . Со свойствами кнопок вы можете детально ознакомиться в документации. Вот этот тулбар мы и добавляем к нашему окошку.

 

 

 showToolbar: function(){
		params = this.extend(this.params, {
			tbar:this.toolbar
		})
		this.show(params);
}

 

Тут стоит детально разобрать функцию extend нашего объекта, если кому что не понятно.

 

 

extend: function(obj, addsParams){
		// Каждый элемент добавляемого объекта прибавляем к имеющемуся
		for(var i in addsParams){
			obj[i] = addsParams[i];	
		}
		return obj;
}

 

 

Как говорит один мой знакомый мегакодер, "Программист должен быть в меру ленивым". Вот и мне лень под несколько примеров копипастить код, потому мне нужна функция, которая позволит легко расширить объявленные базовые параметры для окна. То есть в нашем случае я использубя функцию extend к имеющемуся объекту params, добавляю объект toolbar, то есть в итоге получаю не только все настройки окна, но и плюс ко всему тулбар, и вывожу уже окно вместе с тулбаром. Дальше я буду расширять параметры окна и другими свойствами.

 

Теперь создадим окно с остальными барами

 

 

bbar:{
	items:[{
		text: 'Кнопка 1' 
	},
	{
		text: 'Кнопка 2'	   
	},{
		text: 'Кнопка 3'	   
	}]	
},
	
fbar:{
	items:[{
		text: 'Сохранить',
		handler:function(){
			WINDOW.click_('Сохранить');	
		} 
	},
	{
		text: 'Закрыть',
		handler:function(){
			WINDOW.win.close();	
		}
	}]	
},
	
showAllBars: function(){
	params = this.extend(this.params, {
		tbar:this.toolbar,
		bbar:this.bbar,
		fbar:this.fbar
	})
	this.show(params);
}

 

 

 

Тут, думаю, все понятно. Единственный момент: наверняка те, кто внимательно изучили прошлый урок, заметили, что в нашем случае fbar ведет себя почти так же, как и атрибут buttons, с небольшими отличиями. Мне даже стало интересно и я решил поэкспериментировать. Оказывается, если одновременно указать и fbar и buttons, buttons имеет приоритет и выводятся только кнопки, а fbar игнорируется (или затирается, я уж не стал лезть глубоко).