Extjs4.x Controller中refs以及Ext.ComponentQuery解析使用示例

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()方法，該方法會經過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'
});
// 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)');

/*
商品控制層,
全部邏輯代碼都在這裏寫
*/
Ext.define('keel.controller.GoodsCtrl', {
    extend: 'Ext.app.Controller',
    stores: ['GoodsStore'],//聲明該控制層要用到的store
    models: ['GoodsModel'],//聲明該控制層要用到的model
    views: ['goods.GoodsListView','goods.GoodsWinView'],//聲明該控制層要用到的view
    refs: [//至關於一個映射,這樣就能夠在控制層方便的經過geter取得相應的對象了
        {
            ref: 'goodslistview',
            selector: 'goodslistview'
        },
        {
            ref: 'goodswinview',
            selector: 'goodswinview'
        }
    ],
    init: function() {
        this.control({//這裏的this至關於這個控制層
            'viewport > goodslistview': {
                afterrender: function(gp){//偵聽goodslistview渲染
                    gp.down('button[action=testBtn1]').on('click',function(){
                        //偵聽goodslistview工具條上action=testBtn1的按鈕單擊事件
                        this.showWin();
                    },this);
                       
                    gp.down('button[action=testBtn2]').on('click',function(){
                        //偵聽goodslistview工具條上action=testBtn2的按鈕單擊事件
                        alert(this.getGoodslistview().title)
                    },this);
                }
            },
            'goodswinview button[action=ok]': {
                //偵聽goodswinview中action=ok的按鈕單擊事件
                click: function(){
                    this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
                }
            }
        });
    },
    showWin : function(){
        Ext.create('keel.view.goods.GoodsWinView').show();    
    }
});