Ext.ComponentQuery用法

/**
* Ext.ComponentQuery用法
*/
Ext.onReady(function() {
var panel = Ext.create("Ext.container.Viewport", {
items : [{
width : 400,
height : 300,
title : 'panel1',
ref : 'panel1',
items : [{
xtype : 'button',
text : 'p1btn1',
ref : 'btn1'
}, {
xtype : 'button',
text : 'p1btn2',
id : 'btn2',
ref : 'btn2'
}]
}, {
width : 400,
height : 300,
title : 'panel2',
ref : 'panel2',
items : [{
xtype : 'button',
text : 'p2btn1',
ref : 'btn1'
}]
}]
});
// 通过xtype得到组件,如果是多个类别,可以逗号隔开,如:'gridpanel,treepanel'
// var items = Ext.ComponentQuery.query('panel,button',panel);
// 通过ID获得组件:#ID
// var items = Ext.ComponentQuery.query('#btn2',panel);
// 获得panel下的所有button,这个需要注意,button必须在panel下的第一层,如果中间跨层是找不到的,如:'viewport>button'是找不到button的,因为中间有一层panel
// var items = Ext.ComponentQuery.query('panel>button',panel);
// 通过组件的属性来查找
// var items = Ext.ComponentQuery.query('button[id=btn2]',panel);

/**
* 以上是Ext.ComponentQuery使用的几种情况,在ExtJS4中所有的组件都有一个query方法,这个方法就是ComponentQuery的实现。不过,
* 我们在开发中真正用的时候,还是用组件的query方法,比较方便。
* 还有就是ref属性,这个在extjs4没有了,使得我们操作起来不想以前那么方便了,不过,我们还是可以再这个属性用作在一个容器内,各个组件的唯一标识,这样的话也避免了ID的重复,
* 下面我就简单的写一下,如果大家有什么问题,或者是好的方式。欢迎到家给我留言。我们一起学习,共同进步,谢谢。
*/

// 在容器panel里,通过ref查找panel2下的btn1
var items = panel.query('panel[ref=panel2]>button[ref=btn1]');
Ext.Array.each(items, function(d) {
alert(d.ref + '--' + d.text + '--' + d.getXType());
})
})

你可能感兴趣的:(function,title)