ExtJS 避免ID和Ext。getCmp的使用

如果你的ExtJS代码是OO的设计。那么你肯定已经意识到给一个封装好的panel等组件类的fields添加id是不可取，因为你无法控制，在同一个页面里面，有多少同样类的实例化。

所以，为了避免这种情况发生，我们禁止组件里面id的使用，而用itemId取而代之，如果没有定义id的items，extjs会自动为其分配id。

那么既然采用了itemId，要用什么样方法进行定位呢？

down 方法，是一个通过itemId获得element的绝佳途径

down( selector, [returnDom] ) : HTMLElement/Ext.dom.Element

Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).

Defined in override Ext.dom.AbstractElement_traversal.

Available since: Ext 4.1.0

Parameters

• selector : String

  The CSS selector

• returnDom : Boolean (optional)

  True to return the DOM node instead of Ext.dom.Element

  Defaults to: false

Returns

• HTMLElement/Ext.dom.Element

  The child Ext.dom.Element (or DOM node if returnDom = true)

代码示例

 

Ext.getCmp('viewBasicInfoPanel').down('#contractName').setValue('Tommy lee');

注意的是 # 是itemId选择的时候，必不可少的，否则将会选择失败。

 

总之，在extjs4中，extjs给每个组件增加了up()和down()方法，这样使得我们更加容易得到每个组件的父级组件和子级组件。当然，除了这 些方法，extjs还增加了更加强大的ComponentQuery类，通过这个类，我们可以使用更多的方法来找到所需要的任何组件。