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 FAll descendant Components of E that match FE > FAll direct children Components of E that match FE ^ FAll 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();
}
});