Blog

Come meet us in Las Vegas at our Bryntum Happy Hour

SenchaCon 2016 in Las Vegas is only one week away we can’t wait to show you all the new cool things we’ve been working on this fall. If you’re in the Las Vegas area, you’re very welcome to come meet us on November 6th and have some beer and snacks. Please register at our Facebook event, and we hope to see you on Sunday at 5PM.

Siesta 4.2.0 – Improved Recorder + Faster Testing

We’ve just released Siesta 4.2.0 – an important Siesta milestone and in this blog post we’ll highlight its most important features.

Introducing Ariadne – The New Query Finder

The internals of the Siesta event recorder have been completely rewritten (more specifically, the target finding algorithm). In previous versions, the recorder sometimes found either a very long CSS query or it could not figure out a stable CSS query at all. …

Using Ext Gantt with React

React is a very popular library for front-end development. It makes it easy to build state driven views and it efficiently handles DOM updates. React is component-based and in this blog post we are going to explore how to wrap Ext Gantt as a reusable React component.

Prerequisites

In this guide we will use React with JSX. We are going to load React …

Using the MVVM pattern with Ext Scheduler

My name is Pavel and I recently joined the Bryntum development team. I have used Ext JS as my main JS framework for more than three years and today I’m going to show you how you can use the MVVM pattern in your application.

Let’s start by looking at what MVVM is and why we need it. As you may know, MVVM is the Model-View-ViewModel pattern. A …

Gantt Chart and Kanban Task Board Integration

We are happy to announce a new example which integrates the Ext Gantt with the Task Board component. This blog post will give a brief description of the example and highlight some interesting parts of the code. Feel free to try the example out, you can find it here. To browse the source files, just click Details on the right.

Short description of …

Using Ext Scheduler with Angular 2

One of the most popular javascript frameworks nowadays is Angular. Angular gives you the ability to make HTML content dynamic by using templates, components and services. However Angular does not have a suite of high-level UI components as ExtJS does.

In this blog post we are going to create an Angular component for our Ext Scheduler, which can be used in Angular templates as <scheduler> tags. After following the steps …

Using Ext Gantt with Ruby on Rails

My name is Johan and I’ve just started working at Bryntum after working with Ext JS for about 8 years at my previous job. During my first week there was a forum post requesting a Ruby on Rails demo which I decided to build. This blog post contains a guide that explains the basics of integrating Ext Gantt with RoR. The guide shows step by step how to set up …

Disabling Animations In Your Siesta Tests

While testing your web application frontend, it’s key to have stable tests producing consistent results. This means rerunning a test multiple times under varying CPU load should always give a reliable predictable outcome. Animated CSS transitions and JS based animations are two things that could introduce instability for your UI tests such as race conditions while the mouse cursor is being moved.

Below is a simple example expanding an …

Tips & Tricks: Animating Your Ext.DataView

If a data field in your Ext.data.Model has a visual representation in your View, such as the % complete of a progress bar, it is preferable to be able to do a “smart diff” of the rendered markup. By default the Ext.DataView replaces the entire DOM structure representing a Model when a Store change is detected. Doing a smart diff means traversing the DOM structure of a View …

Using Ext Gantt & Scheduler 4.x with Sencha Cmd

Lately we have received a few questions from our community on how to use the shipped Bryntum packages with Sencha Cmd. For a while now, both the Gantt and Scheduler distributions ship with ready to use Sencha Cmd packages. They are located in the “packages” sub-folder inside each file archive. To use the packages in your application you need to execute two basic steps:

1. Install the packages. …