Extjs4.x(MVC)ControllerにおけるrefsおよびExt.ComponentQuery解析

8805 ワード

refs :
Object []
5
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()メソッドで、コンポーネントがgridのコンポーネントをExt.ComponentQueryでページに取得します.
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)');

[アルゴリズム]プログラマー-kビット数/Java

1015 TIL