『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 : '[e-mail]'
                                                    }, {
                                                        Name : 'Jane Doe',
                                                        Email : '[e-mail]'
                                                    }]
                                        })
                            }]
                }]
    }, {
        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()}');