/**
* 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());
})
* 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());
})
})
本文转自yunlielai51CTO博客，原文链接：http://blog.51cto.com/4925054/1310794，如需转载请自行联系原作者
