By default Component.js files are automatically loaded.

You can add additional JavaScript dependencies to a component like that:

class Example_Component extends Kwc_Abstract
    public static function getSettings()
        $ret = parent::getSettings();
        $ret['assets']['files'][] = 'web/js/Example.js';
        $ret['assets']['dep'][] = 'ExampleDependency';
        return $ret;

In the Component.js you usually should use Kwf.onElementReady and work with the element you get:

Kwf.onElementReady('.example', function(el) {
    el.child('a').on('click', function(ev) {
    }, this);


Different methods exist to initialize a component with custom JavaScript.

The J version passes jQuery object, instead of Ext.Element.

on(J)ElementReady(selector, callback, options)

This gets called exactly once for every element matching the selector. Using that you can initialize the behavior of the component, like installing click/hover handlers.


callback parameters:

on(J)ElementHide(selector, callback, options)

Similar to onJElementShow, just for hiding the element.

on(J)ElementWidthChange(selector, callback, options)

Similar to onJElementShow, just for changing the element width. This gets also called an browser window resize.


on(J)ContentReady(callback, options)

Called for once for every element that gets rendered, gets shown/hidden or changes it's width. Usually using onElementReady has better performance and should be preferred.

The callback is called exactly once for every callOnContentReady.


callback parameters:

callOnContentReady(renderedEl, options)

This method must be called if: