DOCS

EXC | DEV | Documentation | Version 1.0

Expansions

Use expansions to extend your HTML. An expansion adds a special behavior to html elements or components.

The first type of expansions are "magic" attributes. Magic attributes start with "m-".

Basic magic attributes

You can add basic action handlers to many of the common events. EXC provides magic handler for the following events: click, change, blur, focus, dblclick, keydown, keyup, keypress, mouseenter, mousemove, mouseover, mouseup, copy, cut, paste.

You add an event action handler with an attribute that starts with m- followed by the event name. For example m-click.

<w name='myButton' type='btn'  m-click='[doClick]'>Click Me</w>

The value of this attribute could be on of the following actions:

Type Syntax Description
Message [message_name] Publishes a message.

For Example:

m-click="[check_record_status]"
Controller Function [controllerName.fnName] Executes the function fnName of the controller specified by controllerName.

For Example:

m-click="[myEmpRecordController.checkRecord]"
Enable enable($componentName) Enables the component specified.

For Example:

m-click="enable($fld_emp_salary)"
Disable disable($componentName) Enables the component specified.
focus focus($componentName) Sets the focus to a specified component.
toggle toggle(disable, $componentName) Toggles the disable state of a component.
toggle toggle(.class, $componentName) Adds or removes a css class of a component.

Confirm

The attribute m-confirm adds a confirmation dialog. The value of the attribute m-confirm is the prompt.

This option will call event.stopImmediatePropagation() and event.preventDefault() when the user cancels or rejects the confirmation.

The confirmation is executed on the click event.

This expansions uses EXC's flavor of action events, in particular it will be triggered on the click.action.validation() stage to allow to cancel further actions without relaying on stopImmediatePropagation() and preventDefault().

We suggest that when using this expansion that you add your own event handlers using click.action.handler() or click.action.done(), for example:

	var myBtn = exc.component.get('btnDeleteRecord');
	myBtn.onAction("click.action.handler()", function(event){
		console.log("deleting the record...");
		//my delete code here..
	});

The confirmation will not be triggered if the component has the is-disabled class.

Fork me on GitHub