CxJS offers a comprehensive UI library with over 100 components. Have fun playing with the examples and learn CxJS in the same time. Don't forget to check out CxJS source code on GitHub and star the project.
No need to worry about form validation and layouts any more. Cx takes care of that for you. Learn how to create a simple Login form.
Grids are super easy in Cx. Check this example to learn how to create simple grids.
Who said line graphs have to be hard? Learn how to create this simple LineGraph example showing Google stock price.
Column graph with draggable markers accompanied with a grid control.
A large grid using various widgets to visualize and edit the data in the same time.
Sample markup and components combined into dashboards widgets.
Organize tasks using drag & drop.
Play with Cx logo.
Play against yourself.
Home budget mockup app.
A sample application for calculating loan payment schedules.
Drag and drop rows from one grid to another.
Tree-like structure useful for organizing numerous checkboxes into categories. Alternative to multi-value select.
A grid with grouping and totals.
Multi-level grouping based on user selected columns.
Limit grid height with the use of pagination.
Grid with check based selection.
Edit grid cell values directly in grid.
Create a grid where you can select a row and use a form to edit it.
Learn how to make a folder tree using a grid control.
Grid header split into multiple lines.
Toggle grid column visibility using a dropdown menu.
Learn how to add custom header tools to your grids.
Learn how to add loading mask in grid.
Repeater widget can be used for displaying collections using a template.
Learn how to combine Sandbox and Rescope to simplify your code in some advanced usecases.
Data binding is a process of connecting the application state to the UI. Data changes will be reflected in the UI and user actions will be properly translated into data changes. Explore some of the ways to bind data in Cx.
Controllers are used to concentrate business logic required for views and can be assigned to widgets using the controller attribute. Once assigned, controllers are passed down the widget tree.
Sometimes you want to limit the rate of change propagation or to postpone the change until the user finishes the interaction. In such scenarios throttle and debounce come in very handy.
In this mode, selection is handled by setting a designated selection property to be either true or false. In this example a BubbleGraph is used to demonstrate the concept.
Key selection is a more common selection mode, where selected value(s) is/are stored in a separate variable.
Outer layouts define wrapper around the content being rendered. This is very convenient when multiple pages need to share a common layout or for defining global application layouts.
LabelsTopLayout is used for dense forms with very long labels or when putting labels on top might save some space.
LabelsLeftLayout is used to get a horizontal form layout.
A simple pie chart with a legend and selectable segments.
Pie charts can contain multiple levels.
A simple line graph with a legend.
A line graph with stacking option.
Column graph with rotated labels.
Illustration of combining multiple chart elements into a timeline widget.
Stacked column graph with multiple stacks per each category.
A sample of a multi-stack column graph where values are normalized in each category.
A sample of a multi-stack column graph where column widths and offsets are calculated based on the number of items.
A simple bar graph accompanied with a legend.
Stacked bar graph with positive and negative stacks.
A sample bullet chart implementation showing the actual and target values in context of bad, satisfactory and good range.
A simple scatter graph with a clickable legend.
Draggable markers of different sizes and shapes.
Marker lines used to highlight peak values.
Example of horizontal and vertical ranges with draggable handles.
Auto assign best colors to chart series.
Display legend entries inside of a grid, alongside other related data.
A simple form illustrating use of the ValidationGroup widget.
Validation of a form made out of a couple of tabs.
Create a Calendar widget with just one line of code.
MonthPicker widget can be used for selecting months, quarters or years.
The ColorPicker widget is used for selecting colors.
Lookup Field offers selection from a list of available options with additional features such as remote data fetching, search and multiple selection.
The Select control is a wrapper around the native HTML select element.
LabeledContainer widget is used in combination with LabelsLeftLayout to group multiple items under the same label.
Labels are usually simple texts, however, sometimes it's required to apply different styling or put additional content inside them.
The NumberField control is used for numeric inputs, including currencies and percentages.
Text field control is used for single line textual inputs. Many different states make it an advanced control.
Multiple types of sliders (standard, stepped, range and vertical).
Switch is a two-state toggle widget commonly used instead of a Checkbox, as it offers the same functionality in addition to its modern appearance.
Checkbox is a commonly used widget for expressing binary choices.
Radio buttons are commonly used for making a single selection within a limited number of options.
The Menu widget is used to present a list of options or commands in a horizontal or a vertical form. The Submenu widget is used when multiple options need to be shown under a single menu item.
Tabs are commonly used to organize content into a single container. In Cx, tabs behave similarly to radio buttons. Tabs are selected on click and only one tab may be active at a time.
Windows are overlays with headers, footers and special appearance.
The MsgBox class provides utility methods for displaying alerts and confirmation windows.
The Toast widget is used to inform the users about new events and offer quick actions. The position of the toast is controlled by the framework.
FlexBox is a convenience widget for setting up simple flex-box based layouts. FlexBox provides a number of shortcut options which make it easy to justify, align or add spacing to the content.
Learn how to utilize the List widget to display a collection of items that can be used for navigation and selection.