module Ext_util_ElementContainer:This mixin enables classes to declare relationship ...sig
..end
This mixin enables classes to declare relationships to child elements and provides the mechanics for acquiring the elements and storing them on an object instance as properties.
This class is used by components and container layouts to manage their child elements.
A typical component that uses these features might look something like this:
Ext.define('Ext.ux.SomeComponent', {
extend: 'Ext.Component',
childEls: [
'bodyEl'
],
renderTpl: [
'<div id="{id}-bodyEl"></div>'
],
// ...
});
The childEls
array lists one or more relationships to child elements managed by the
component. The items in this array can be either of the following types:
name
property that names the instance property for the element, and
one of the following additional properties:
id
: The full id of the child element.itemId
: The suffix part of the id to which "componentId-" is prepended.select
: A selector that will be passed to Ext.select.selectNode
: A selector that will be passed to Ext.DomQuery.selectNode.The example above could have used this instead to achieve the same result:
childEls: [
{ name: 'bodyEl', itemId: 'bodyEl' }
]
When using select
, the property will be an instance of Ext.CompositeElement. In
all other cases, the property will be an Ext.Element or null
if not found.
Care should be taken when using select
or selectNode
to find child elements. The
following issues should be considered:
This above issues are most important when using select
since it returns multiple
elements.
IMPORTANT
Unlike a renderTpl
where there is a single value for an instance, childEls
are aggregated
up the class hierarchy so that they are effectively inherited. In other words, if a
class where to derive from Ext.ux.SomeComponent
in the example above, it could also
have a childEls
property in the same way as Ext.ux.SomeComponent
.
Ext.define('Ext.ux.AnotherComponent', {
extend: 'Ext.ux.SomeComponent',
childEls: [
// 'bodyEl' is inherited
'innerEl'
],
renderTpl: [
'<div id="{id}-bodyEl">'
'<div id="{id}-innerEl"></div>'
'</div>'
],
// ...
});
The renderTpl
contains both child elements and unites them in the desired markup, but
the childEls
only contains the new child element. The applyChildEls method
takes care of looking up all childEls
for an instance and considers childEls
properties on all the super classes and mixins.
class type t =object
..end
class type configs =object
..end
class type events =object
..end
class type statics =object
..end
val of_configs : configs Js.t -> t Js.t
of_configs c
casts a config object c
to an instance of class t
val to_configs : t Js.t -> configs Js.t
to_configs o
casts instance o
of class t
to a config object