ExtJS-组件查询

更新记录

点击查看

``` >2023年3月1日 优化内容结构，加入组件中查询内容 >2023年1月6日 更新Ext.getCmp >2022年12月3日 开始。 ```

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

---

查询组件

Ext.ComponentQuery.query

Finding components based on xtype:

var panels = Ext.ComponentQuery.query('panel');

nesting by adding a second xtype separated by a space.

var buttons = Ext.ComponentQuery.query('panel button');

Retrieving components based on attribute values: Along with retrieving references

var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');

Combining selectors

var buttonsAndTextfields = Ext.ComponentQuery.query('button, textfield');

Finding components based on ID:

var usersPanel = Ext.ComponentQuery.query('#usersPanel');

或者

let panel = Ext.getCmp("panel-1234");
console.log(panel);

或者

let panel = Ext.ComponenetManager.get("panel-1234");
console.log(panel);

Retrieving components based on attribute presence:

var extraOptionsComponents = Ext.ComponentQuery.query('component[extraOptions]');

Using Components' Member Functions:

var validField = Ext.ComponentQuery.query('form > textfield{isValid()}');

最后一个子组件

var lastTextfield = Ext.ComponentQuery.query('textfield:last');

Ext.ComponentQuery.is

Evaluating a component instance's type

var isPanel = Ext.ComponentQuery.is(panel, 'panel');

组件中的组件查询

Ext.Container.query

在组件中查找

Ext.getCmp('panda').query('panda2');

Ext.Component.up

向上查找

Ext.getCmp('panda').up();
Ext.getCmp('panda').up('panel');

Ext.Container.down

向下查找

Ext.getCmp('panda').down();
Ext.getCmp('panda').down('button');

Ext.Componenet.getParent

获得父组件

Ext.getCmp('panda').getParent();

Ext.Container.child

获得子组件

Ext.getCmp('panda').child('formpanel').child('checkbox');