extjs 컴포넌트 검색

***** 컴포넌트 검색 방법 *****

1.Ext.ComponentQuery.query() - 배열값을 반환 

2.down() - 자식컴포넌트 

3.up() - 부모컴포넌트 

4.previousSibling() - 형제컴포넌트 

5.getCmp() - 컴포넌트에 id를 지정한 경우에 사용가능

***** 컴포넌트 검색 방법 *****

Ext.onReady(function () {

 

    var myPanel = Ext.create('Ext.panel.Panel', {

        title: 'Panel',

        renderTo: Ext.getBody(),

        bodyPadding: 5,

        width: 600,

        height: 250,

        items: [

        {

            xtype: 'fieldset',

            title: '입력하세요',

            name: 'myFieldset',

            items: [

            {

                xtype: 'datefield',

                fieldLabel: '시작일',

                name: 'myDateField1',

                id: 'myDateFieldId'

            },

            {

                xtype: 'datefield',

                format: 'Y-m-d',

                submitFormat: 'ymd',

                fieldLabel: '종료일',

                value: '2014-01-01'

            },

            {

                xtype: 'textfield',

                fieldLabel: '텍스트필드',

                value: '텍스트필드'

            },

            {

                xtype: 'button',

                text: '확인',

                handler: function () {

                    var temp1 = Ext.ComponentQuery.query('datefield');

                    console.log('temp1', temp1);

                    temp1[0].setValue('01/01/1991');

 

                    var temp2 = Ext.ComponentQuery.query('datefield[name=myDateField1]');

                    console.log('temp2', temp2);

                    temp2[0].setValue('01/01/1992');

 

                    var temp3 = Ext.getCmp('myDateFieldId'); //객체 반환 - (id: 'myDateFieldId')컴포넌트에 id를 지정했을 경우 Ext.getCmp를 사용할수 있다.

                    console.log('temp3', temp3);

 

                    var temp4 = Ext.ComponentQuery.query('panel fieldset datefield');

                    console.log('temp4', temp4);

                    temp4[0].setValue('01/01/1994');

 

                    var myFieldset = Ext.ComponentQuery.query('panel fieldset');

                    console.log('temp5', myFieldset[0]);

                    var temp5 = myFieldset[0].down('datefield');

                    temp5.setValue('01/01/1995');

 

                    var temp6 = myPanel.down('fieldset datefield');

                    console.log('temp6', temp6);

                    temp6.setValue('01/01/1996');

 

                    var temp7 = myPanel.query('datefield');

                    console.log('temp7', temp7);

                    temp7[0].setValue('01/01/1997');

 

                    console.log('this', this);

                    var temp8 = this.up('fieldset');

                    console.log('temp8', temp8);

                    temp8.setTitle('변경함');

 

                    var temp9 = this.previousSibling('[name=myDateField1]');

                    console.log('temp9', temp9);

                    temp9.setValue('1999-01-01');

 

                    var temp10 = this.previousSibling('[name!=myDateField1]');

                    console.log('temp10', temp10);

                    temp10.setValue('1999-01-01');

 

                    console.log(myPanel.query('textfield, datefield'));

                }

            }]

        }]

    });

})

 

출처: 최상의 웹애플리케이션 개발을 위한 Ext JS 6 프로그래밍(저자:이병옥, 조만영)