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

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();     
    }
});