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
