Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析

Array of configs to build up references to views on page. For example:

Ext.define("MyApp.controller.Foo",{
     extend:"Ext.app.Controller",

     refs:[{ref:'list',
         selector:'grid'}],});

这将会产生一个this.getList()方法，该方法会通过Ext.ComponentQuery去页面中获取组件为grid的组件

The following fields can be used in ref definition:

ref - name of the reference.
selector - Ext.ComponentQuery selector to access the component.
autoCreate - 如果在页面中找不到该组件，是否自动创建
forceCreate - 强制在每次访问该组件的时候都自动创建一次
xtype - 要创建的组件xtype类型. If you don't provide xtype, an Ext.Component instance will be created.

Ext.ComponentQuery

1.#myPanel 根据id获取

2.panel#myPanel xtype类型为panel，并且id为myPanel的，缩小查找范围

3.CSS选择器

E F All descendant Components of E that match F
E > F All direct children Components of E that match F
E ^ F All parent Components of E that match F

window[title="Input form"] textfield[name=login]^ form > button[action=submit]
以为：title为“Input form”的window，里面name=login的文本框，所属的form下面的action=submit的按钮

4.属性

　　component[autoScroll]，组件中含有autoScroll=true的

　　panel[title="Test"]，组件xtype为panel并且title为test的

　　component[?autoScroll]，组件中含有autoScroll，无论其值是多少

5.模糊定位

Ext.ComponentQuery.query('panel[cls=my-cls]');
//可以找到
Ext.create('Ext.window.Window', {
    cls: 'my-cls'
});
//但找不到
Ext.create('Ext.panel.Panel', {
     cls: 'foo-cls my-cls bar-cls'
 });
/***********************************/
Ext.ComponentQuery.query('panel[cls~=my-cls]');
//可以同时找到上面两个组件
/***********************************/
Ext.ComponentQuery.query('panel[title^=Sales]');
//Title以Sales开头的Panel
/***********************************/
Ext.ComponentQuery.query('field[fieldLabel$=name]');
//fieldlabel以name结尾的
Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Enter your name'
});
/***********************************/

6.条件组合查找

//and
Ext.ComponentQuery.query('panel[cls~=my-cls][floating=true][title$="sales data"]');
//or
Ext.ComponentQuery.query('field[fieldLabel^=User], field[fieldLabel*=password]');

7.伪类（preudo classes），筛选结果

not Negates a selector.
first Filters out all except the first matching item for a selector.
last Filters out all except the last matching item for a selector.
focusable Filters out all except Components which are currently able to recieve focus.
nth-child Filters Components by ordinal position in the selection.

// Select first direct child button in any panel
 Ext.ComponentQuery.query('panel > button:first');

 // Select last field in Profile form
 Ext.ComponentQuery.query('form[title=Profile] field:last');

 // Find first focusable Component in a panel and focus it
 panel.down(':focusable').focus();

 // Select any field that is not hidden in a form
 form.query('field:not(hiddenfield)');

8.例子

// retrieve all Ext.Panels in the document by xtype
var panelsArray = Ext.ComponentQuery.query('panel');

// retrieve all Ext.Panels within the container with an id myCt
var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt panel');

// retrieve all direct children which are Ext.Panels within myCt
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

// retrieve all grids or trees
var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');

// Focus first Component
myFormPanel.child(':focusable').focus();

// Retrieve every odd text field in a form
myFormPanel.query('textfield:nth-child(odd)');

// Retrieve every even field in a form, excluding hidden fields
myFormPanel.query('field:not(hiddenfield):nth-child(even)');