# j-Extend

> This component is a specific component with powerful functionality. When the component is evaluated then it executes two events in the form below. The component can be helpful in web applications that

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 3246ce39351407d1048c86711b27c1346f4aa1a0dcbfedbaa3c0dee3c0d4f644
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

This component is a specific component with powerful functionality. When the component is evaluated then it executes two events in the form below. The component can be helpful in web applications that can be dynamically extended.

__Configuration__:

- `name {String}` A name for extend, the component will emit `ON('extend_' + name)` event

The component emits only two events that you can catch somewhere:

```js
// NAME: is defined in the component configuration
ON('extend_NAME', function(opt) {
	// opt.name {String} with a value according to the "config.name"
	// opt.component {Instance of j-Extend}
	// opt.element {jQuery element}
	// opt.dom {Node}
});

ON('extend', function(opt) {
	// opt.name {String} with a value according to the "config.name"
	// opt.component {Instance of j-Extend}
	// opt.element {jQuery element}
	// opt.dom {Node}
});
```

Use it with `<ui-component name="extend">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Pete Širka. Source: the Componentator components repository, MIT license.

```html example.html
<div style="width:300px">
	<ui-plugin path="form">
		<ui-component name="extend" config="name:test"></ui-component>
	</ui-plugin>
</div>

<script>
	ON('extend_test', function(opt) {
		// Here you can use IMPORT() method
		opt.element.append(`
			<div class="m">Extended:</div>
			<ui-component name="input" path="?.name" config="required:1">Label</ui-component>
		`);
	});
</script>
```