Extml

Overview

Extml simplifies the creation and management of ExtJS components through an intuitive HTML-based markup system. It enables reactive programming, dynamic state handling, and seamless integration with ExtJS's modern toolkit.

---

Table of Contents

- Core Concepts
- Installation
- Examples
- Basic Example
- Advanced Example
- Integration with ExtJS Application
- Using the For Component
- Key Features
- State Management
- Reactive Components
- Scoped Styling
- Component Guidelines
- API Reference
- License

---

Core Concepts

Extml allows developers to:

- Leverage HTML Markup: Create ExtJS components using simple HTML templates.
- Reactive Programming: Update components dynamically based on state changes.
- Scoped Styling: Define styles specific to components and their children.

---

Installation

$3

Use Extml from a CDN:

- UMD: https://cdn.jsdelivr.net/npm/extml/dist/extml.umd.min.js
- ES: https://cdn.jsdelivr.net/npm/extml/dist/extml.es.min.js

Install Extml via npm:

``bash
$ npm install -D extml
`

---

Examples

$3

Try Extml live on Sencha Fiddle.

$3

`javascript
import { h } from 'extml';

function myButton() {
return h
alert('Button clicked!')} />
;
}

const component = myButton();
console.log(component);
/* Outputs:
{
xtype: 'button',
text: 'Click Me',
listeners: [{ tap: [Function] }]
}
*/
`

$3

`javascript
import {
h,
createState,
createRef,
createEffect,
createDerivedState,
conditionalState
} from "extml";

function timelineComponent() {
const [currentTime, setCurrentTime] = createState(0);
const [isPlaying, setIsPlaying] = createState(false);

const currentRelativeTime = createDerivedState(() => {
const time = currentTime();
return time < 10 ? 0:0${time} : 0:${time};
});

const videoRef = createRef();

createEffect(() => {
const video = videoRef();
if (!video) return;

video.addEventListener('timeupdate', () => setCurrentTime(video.currentTime));
video.addEventListener('play', () => setIsPlaying(true));
video.addEventListener('pause', () => setIsPlaying(false));
}, [videoRef]);

return h

Current Time: ${currentRelativeTime}

Status: ${conditionalState(isPlaying, 'Playing', 'Paused')}

;
}

const component = timelineComponent();
console.log(component);
`

$3

`javascript
Ext.application({
name : 'Fiddle',

launch : function() {
const { h } = window.extml;

const myButton = function() {
return h
text="Click me! (see the console)"
ontap=${(me) => console.log(me)}
/>
;
};

const myPanel = function() {
return h


<${myButton}/>

Html is allowed ;) Go to Google
alert('hello')}/>

the result of 1+2 is ${1+2}

;
};

this.viewport.add(myPanel());
}
});
`

$3

`javascript
import { h, For } from "extml";

function listComponent(items) {
return h

<${For}
each=${items}
getKey=${(item) => item.id}
effect=${(item) => h

${item.content}

}
/>

;
}

const items = [
{ id: 1, title: "Item 1", content: "Content 1" },
{ id: 2, title: "Item 2", content: "Content 2" },
{ id: 3, title: "Item 3", content: "Content 3" }
];

const component = listComponent(items);
console.log(component);
`

---

Key Features

$3

Extml provides a robust state management system:

- createState: Creates a reactive state.
- createDerivedState: Generates states derived from other states.
- Example:
`javascript
const [value, setValue] = createState(0);
setValue(value() + 1);
`

$3

createEffect allows you to perform actions when dependencies change:

`javascript
createEffect(() => {
console.log('Value changed:', value());
}, [value]);
`

$3

Define styles specific to a component using the

;
`

---

Component Guidelines

- Component Tags: All ExtJS component tags must use the ext- prefix (e.g., ).
- Event Listeners: Use the on prefix for defining event listeners (e.g., ontap for the tap event).
- HTML Compatibility: You can mix native HTML tags with ExtJS components in your templates.
- Scoped Styles: Define component-specific styles within a