Creating Cascading Combo Boxes in Ext JS

In this tutorial you will learn how to create cascading combo boxes in Ext JS. The term “cascading combo boxes” refers to a setup of two or more linked combo boxes in Ext JS, where the selection of a value in one combo box determines the values that will be shown in the following combo box. This article is part of a series of Ext JS tutorials that I have posted on MiamiCoder.com.

The example we will implement in this tutorial consists of a couple of combo boxes that will show automobile lines and models for a fictional car reviews form.

cbx-cascading-1

Continue Reading →

Sencha Touch Book Supports Sencha Touch 2.4

My Sencha Touch book is now updated for Sencha Touch 2.4. The book will teach you how to create a Sencha Touch 2.4 application. Starting with UI mockups, and ending with a production build of the app.

These are the specific topics that you will learn:

  • The building blocks of a Sencha Touch application.
  • How to implement the Model-View-Controller pattern in a Sencha Touch application.
  • How to create an application with multiple views, and how to implement intuitive navigation patterns.
  • How to create list-based and master-detail user interfaces in a Sencha Touch application.
  • How to use Sencha Touch forms to capture and validate user input.
  • How a Sencha Touch app leverages HTML5 local storage to save data on the device.
  • How to scaffold, minify, and deploy a Sencha Touch app to production using Sencha Cmd.

Learn more about the Sencha Touch book.

Mobile UI Patterns – A Flowchart for User Registration, Login and Logout

In this mobile UI patterns article we will build a flowchart depicting the screens needed to handle user registration, login and logout in a mobile application. As a UX designer, it’s very important that you are familiar with these screens and how the interact with each other.

Let’s start by taking a look at the typical application launch sequence.

An Application’s Launch Sequence

A large number of applications have a launch sequence that takes users to a Landing Page or Landing Screen, however you like to call it, from where they have access to deeper areas of the app. We could draw this UI pattern like this:

screen-flow-app-launch

The Login Flowchart

Most apps provide personalization features that require a user to have an account in the app. In those applications the launch sequence changes quite a bit. For starters, when users arrive at the Landing Page and you don’t know who they are, you need to redirect them to a Login Page where they will enter their credentials:

screen-flow-login-locked

Continue Reading →