ExtJS : Ext.ComponentQuery

Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector.

Components can be retrieved by using their xtype with an optional . prefix

·        component or .component

·        gridpanel or .gridpanel

An itemId or id must be prefixed with a #

·        #myContainer

Attributes must be wrapped in brackets

·        component[autoScroll]

·        panel[title="Test"]

(selector //to do *,#)

 

Method:

1         query( String selector, Ext.container.Container root ) : Ext.Component[]

This class provides searching of Components within Ext.ComponentManager (globally) or within a specific Ext.container.Container in the document, with syntax similar to a CSS selector.

             This class is very useful when we need to control the views in the Controller class

            Example:

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

title: 'Panel 1',

html: 'Body 1',

Id: 'panel1Id',

columnWidth: .25, //means 25%

height: 120

});

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

title: 'Panel 2',

html: 'Body 2',

columnWidth: .25, //means 25%

height: 120

});

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

title: 'Panel 4',

html: 'Panel 4 within Panel 3',

height: 60

});

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

title: 'Panel 3',

columnWidth: 1/2, //means 50%

items:[panel3_1],

height: 120

});

var column = Ext.create('Ext.window.Window', {

title: 'My Window',

id: 'myWindow',

width: 400,

height: 170,

layout:'column',

defaults: {

bodyStyle: 'padding:10px'

},

items: [panel1, panel2, panel3]

});

column.show();

var resultQuerys = Ext.ComponentQuery.query('#myWindow panel');

//var resultQuery = Ext.ComponentQuery.query('#myWindow > panel');

var colors = ['#ACFA8A','#F4FA8A','#FAB38A','#8AE9FA','#CA8AFA',];

    for (var resultQuery in resultQuerys)

     {

        if(resultQuerys.hasOwnProperty(resultQuery))

          {

   resultQuerys[resultQuery].body.highlight(colors[resultQuery], {duration: 10000});

          }      

     }