『ExtJS』01 007. ExtJS 4 查找组件

Ext JS 4 使用一个新的帮助类（Ext.ComponentQuery）来使用类似CSSXPath风格的选择器去获取ExtJS组件。

在本文中，我们将展示如何使用Ext.ComponentQuery类来获得帮助信息以指定一个小应用内的组件。

准备工作

---

我们将创建一个简单的应用，由一个带工具条、按钮、表单、grid的Ext.panel.Panel。

Language: JavaScript

Framework: ExtJS 4.1.1a

IDE: Excplise J2EE + Spket

var panel = Ext.create('Ext.panel.Panel', {
    height : 500,
    wight : 500,
    renderTo : Ext.getBody(),
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    items : [{
        xtype : 'tabpanel',
        itemId : 'mainTabPanel',
        flex : 1,
        items : [{
                    xtype : 'panel',
                    title : 'Users',
                    id : 'userPanel',
                    layout : {
                        type : 'vbox',
                        align : 'stretch'
                    },
                    tbar : [{
                                xtype : 'button',
                                text : 'Edit',
                                itemId : 'editButton'
                            }],
                    items : [{
                                xtype : 'form',
                                border : 0,
                                items : [{
                                            xtype : 'textfield',
                                            fieldLabel : 'Name',
                                            allowBlank : false
                                        }, {
                                            xtype : 'textfield',
                                            fieldLabel : 'Email',
                                            allowBlank : false
                                        }],
                                buttons : [{
                                            xtype : 'button',
                                            text : 'Save',
                                            action : 'saveUser'
                                        }]
                            }, {
                                xtype : 'grid',
                                flex : 1,
                                border : 0,
                                columns : [{
                                            header : 'Name',
                                            dataIndex : 'Name',
                                            flex : 1
                                        }, {
                                            header : 'Email',
                                            dataIndex : 'Email'
                                        }],
                                store : Ext.create('Ext.data.Store', {
                                            fields : [],
                                            data : [{
                                                        Name : 'Joe Blogs',
                                                        Email : 'joe@example.com'
                                                    }, {
                                                        Name : 'Jane Doe',
                                                        Email : 'jane@example.com'
                                                    }]
                                        })
                            }]
                }]
    }, {
        xtype : 'conponent',
        itemId : 'footerComponent',
        html : 'Footer Information',
        extraOptions : {
            option1 : 'test',
            option2 : 'test'
        },
        height : 40
    }]
});

如何去做

---

Ext.ComponentQuery类的主方法是query()。它接收一个CSS/XPath类型的选择器字符串，然后返回一个匹配Ext.Component（或其子类）数组实例。

1. 基于xtype查找组件: var panels = Ext.ComponentQuery.query('panel');
2. 查找二级xtype：var buttons = Ext.ComponentQuery.query('panel button');
3. 基于属性值检索组件：var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
4. 混合查找组件：var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield');
5. 基于ID查找组件：var usersPanel = Ext.ComponentQuery.query('#usersPanel');
6. 基于组件的presence（不太明白这个应该怎么翻译）：var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
7. 使用组件的成员方法查找：var validField = Ext.ComponentQuery.query('form > textfield{isValid()}');

var panels = Ext.ComponentQuery.query('panel');
var buttons = Ext.ComponentQuery.query('panel button');
var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
var buttonsAndTextfields = Ext.ComonentQuery.query('button, textfield');
var usersPanel = Ext.ComponentQuery.query('#usersPanel');
var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');
var validField = Ext.ComponentQuery.query('form > textfield{isValid()}');