Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using Ext.ComponentQuery to Select Components

Page of 168

Using Ext.ComponentQuery to Locate Instances

Refs use Ext.ComponentQuery syntax to define aliases to instantiated view components. The Ext.ComponentQuery expression that you create should be specific enough so as to return a maximum of one single component instance.

Ext.ComponentQuery query syntax is patterned after CSS selectors. Assume the following view class definition:

Ext.define("MyApp.view.MyContainer",{
  extend: 'Ext.Container',
  xtype: 'mycontainer',
  config: {
   layout: 'hbox',
   defaults: {
     xtype: 'component'
   },
   items: [
    { 
      html: 'Hello', 
      cls: 'white', 
      flex:2,
      itemId: 'whitebox'
    },
    { 
      html: 'World', 
      cls: 'black', 
      flex:1, 
      itemId: 'blackbox'
    }
   ]
  }
});

Given the class definition above, the following Ext.ComponentQuery.query() expressions are valid:

// Returns all instances of the "mycontainer" view
Ext.ComponentQuery.query("mycontainer");

//Returns all instances of the component with an itemId  
//of "whitebox" that is nested exactly one level deep 
// in the items array of mycontainer.
Ext.ComponentQuery.query("mycontainer > #whitebox");

// Returns all instances of the component with an 
// itemId of "whitebox" that is nested at any level 
// in the items array of mycontainer.
Ext.ComponentQuery.query("mycontainer #whitebox");

// Returns all instances of the component with an
// itemId of "whitebox" that is nested at any  level  
// in the items array of mycontainer that have a cls 
// property with a value of "white"
Ext.ComponentQuery.query("mycontainer #whitebox[cls=white]");

Note that every component instance has a query() method that enables you to constrain your search to its items array:

var myFirstInstance = 
    Ext.ComponentQuery.query("mycontainer"][0];
var myFirstWhiteBox = 
    myFirstInstance.query("#whitebox");

You can also use component methods that return boolean values as a selection mechanism:

// return first form in app
var myForm = Ext.ComponentQuery.query("formpanel")[0];

// return nested disabled fields by evaluating the 
// results from invoking their isDisabled() methods
var dFields = myForm.query("{isDisabled()}");

Using up() and down() to Locate Instances

As illustrated by the following example, the up() method walks up the ancestor container hierarchy, returning the first container instance that matches the specified selector. The up() returns undefined if no match is found.

// get a pointer to the first blackbox:
var firstBlackBox = Ext.ComponentQuery.query("#blackbox")[0];

// return its parent container:
var parent = firstBlockBox.up("mycontainer");

The down() method walks down through the nested container's items arrays and returns the first component that matches the specified Ext.ComponentQuery expression:

// get a pointer to the first blackbox:
var firstBlackBox = Ext.ComponentQuery.query("#blackbox")[0];

// return its parent container:
var parent = firstBlockBox.up("mycontainer");

// return the whitebox sibling:
var whiteSibling = parent.down("#whitebox");

Page of 168
comments powered by Disqus