[Cookbook Study Ch01]7. Accessing Components with Component Queries

Ext.onReady(function() {
	/***
	 * 인스턴스를 검색하는 함수는 총 4가지다.
	 * query, child, up and down.
	 */
	var panel = Ext.create('Ext.panel.Panel', {
		height : 500,
		width : 500,
		renderTo : Ext.getBody(),
		margin : 50,
		id : 'myPanel',
		layout : {
			type : 'vbox',
			align : 'stretch'
		},
		items : [ {
			xtype : 'tabpanel',
			itemId : 'mainTabPanel',
			flex : 1,
			items : [ {
				xtype : 'panel',
				title : 'Users',
				id : 'usersPanel',
				layout : {
					type : 'vbox',
					align : 'stretch'
				},
				tbar : [ {
					xtype : 'button',
					text : 'Edit',
					itemId : 'editButton'
				} ],
				items : [ {
					xtype : 'form',
					border : 0,
					items : [ {
						xtype : 'textfield',
						fieldLabel : 'Name',
						allowBlank : false
					}, {
						xtype : 'textfield',
						fieldLabel : 'Email',
						allowBlank : false
					} ],
					buttons : [ {
						xtype : 'button',
						text : 'Save',
						action : 'saveUser',
						listeners : {
							click : function(){
								// 메소드의 실행이 가능하다.
								// 아래에 경우 리턴되는 객체가 없을 것이다.
								// 해당 텍스트필드에 값이 들어가 있다면 isValid조건에 맞는 객체를 리턴하게 될것이다.
								// 텍스트 필드에 값을 입력 후 Save버튼을 클릭해본다.
								var validField = Ext.ComponentQuery
										.query('form > textfield{isValid()}');
								console.log(validField);
							}
						}
					} ]
				}, {
					xtype : 'grid',
					flex : 1,
					border : 0,
					columns : [ {
						header : 'Name',
						dataIndex : 'Name',
						flex : 1
					}, {
						header : 'Email',
						dataIndex : 'Email'
					} ],
					store : Ext.create('Ext.data.Store', {
						fields : [ 'Name', 'Email' ],
						data : [ {
							Name : 'Joe Bloggs',
							Email : 'joe@example.com'
						}, {
							Name : 'Jane Doe',
							Email : 'jane@example.com'
						} ]
					})
				} ]
			} ]
		}, {
			xtype : 'component',
			itemId : 'footerComponent',
			html : 'Footer Information',
			extraOptions : {
				option1 : 'test',
				option2 : 'test'
			},
			height : 40
		} ]
	});

	// Ext.ComponentQuery's 'query' method
	/***
	 * ComponentQuery는 down, up과는 달리 해당되는 조건의
	 * component를 모두 찾아리턴한다.
	 */
	// Get all Panels
	var panels = Ext.ComponentQuery.query('panel');
//	console.log(panels);
	
	var formPanel = Ext.ComponentQuery.query('form');
	console.log(formPanel);
	// get all Buttons that are descendents of a Panel
	var buttons = Ext.ComponentQuery.query('button');
//	console.log(buttons);

	// get specific Button based on 'action' property
	var saveButton = Ext.ComponentQuery
			.query('button[action="saveUser"]')[0];
//	console.log(saveButton);

	// get 2 types of Component (buttons and textfields)
	var buttonsAndTextfields = Ext.ComponentQuery
			.query('button, textfield');
//	console.log(buttonsAndTextfields);
//
//	// get specific Panel based on ID
	// ID기반 검색.
	var usersPanel = Ext.ComponentQuery.query('panel#usersPanel')[0]; // or
	// Ext.ComponentQuery.query('#usersPanel');
//	console.log(usersPanel);

	// get components that have 'extraOptions' property with any value
	/***
	 * component중에 extraOption속성을 가지고 있는 콤포넌트를 찾아라.
	 * 속성의 존재여부에 따른 검색.
	 */
	var extraOptionsComponents = Ext.ComponentQuery
			.query('component[extraOptions]');
	// 달리 사용하면 component[height] -> 검색가능
	// component[height=40] -> 검색 가능.
//	console.log(extraOptionsComponents);

	

	// myPanel이라는 아이디를 가진 인스턴스를 찾아 하위에 있는 모든 패널을 찾는다. child 밑에 child까지.
	var validField = Ext.ComponentQuery
			.query('#myPanel panel');
//	console.log(validField);
	// myPanel이라는 아이디를 가진 인스턴스를 찾아 하위에 바로 붙어있는 child를 찾는다.
	var validField = Ext.ComponentQuery
			.query('#myPanel > panel');
//	console.log(validField);

	// Ext.ComponentQuery's 'is' method

	// decide if main Panel is a panel
	// 아래 부터는 인스턴스의 유형을 비교한다.
	var isPanel = Ext.ComponentQuery.is(panel, 'panel');
//	console.log(isPanel); // true

	// decide if main Panel is a panel with an ID of 'myPanel'
	// 비교 대상인 인스턴스가 panel이고 id가 myPanel인가?
	var isPanelWithCorrectID = Ext.ComponentQuery.is(panel,
			'panel[id="myPanel"]');
//	console.log(isPanelWithCorrectID); 

	// Container's 'query' method

	// get all buttons under Users Panel
	var usersPanelButtons = usersPanel.query('button');
//	console.log(usersPanelButtons);

	// Container's 'down' method

	// get first Panel under the main Panel (panel)
	var firstChildPanel = panel.down('panel');
//	console.log('001', firstChildPanel);

	// Container's 'child' method
//
//	// get first child button under the main Panel
//	var childButton = panel.child('button');
//	console.log(childButton); // is no Button in first level so
//								// returns null
//
//	// Container's 'up' method
//
//	// get first Panel above 'Add Order' button
	var saveUserButon = Ext.ComponentQuery
			.query('button[action="saveUser"]')[0];
	var saveUserButonParentPanel = saveUserButon.up('panel');

//	console.log(saveUserButonParentPanel);

	// Pseudo-selectors

	// get last textfield
	var lastTextfield = Ext.ComponentQuery.query('textfield:last');
	console.log(lastTextfield);

	// define your own that returns visible components
	Ext.ComponentQuery.pseudos.visible = function(items) {
		console.log('ii', items)
		var result = [];

		for ( var i = 0; i < items.length; i++) {

			if (items[i].isVisible()) {
				result.push(items[i]);
			}
		}

		return result;
	};
	var visibleComponents = Ext.ComponentQuery
			.query('component:visible');
//	console.log(visibleComponents);

});
// 출처 : Ext JS4 Web Application Development Cookbook