ExtJS Grid Edit Tutorial: Edit Data with an Ext JS Grid and a PHP Backend

This ExtJS Grid edit tutorial shows you how to edit data with an Ext JS Grid and a PHP backend. It also shows you how to define column editors in an Grid, and how to use an Ext JS ViewController to handle events generated from an Ext JS View.

In the tutorial we will build an Ext JS 5 application that pulls hypothetical model cars data from a PHP page and uses a Grid to present and edit these data.

grid-row-editing-1

We are going to divide the tutorial in two parts:

  1. Part 1, which is this article, explains how to edit existing records in an Ext JS Grid.
  2. Part 2, which will follow this article, explains how to add new records and delete records from the Ext JS Grid.

The two articles are part of a series of Ext JS tutorials that I am publishing on my blog MiamiCoder.com.

As depicted in the screenshot, a user will be able to modify a model car’s name, vendor and category through the Ext JS Grid. While we will let the user enter free text for the Name and Category fields, for the Vendor field we will provide a ComboBox with a list of vendor names. This requires a special setup for the Ext JS Grid and its Controller, which we will explore in a few minutes.

Continue Reading →

Using MongoDB and Mongoose for User Registration, Login and Logout in a Mobile Application

This mobile application tutorial shows you how to create a user registration, login and logout backend using MongoDB and Mongoose. This article is part of a series of mobile application development tutorials that I have been publishing on my blog MiamiCoder.com, which shows you how to create a Meeting Room Booking mobile application. This app will be used to browse an inventory of meeting rooms and reserve rooms for conference calls and other types of events.

Using MongoDB and Mongoose for User Registration, Login and Logout in a Mobile Application

The backend that we will create in this article will connect with the user account management screens that we built in a previous chapter of this series. This backend will consist of the following modules:

Continue Reading →

Ext JS Grid Grouping Tutorial

This tutorial shows you how to create a grouped grid in Ext JS. Ext JS grid grouping is a common scenario in business applications where users need to analyze tabular data grouped by different attributes. The Ext JS application that you will create in this tutorial will render an Ext JS grid containing fictional data describing model cars. This article is part of a series of Ext JS tutorials that I have posted on MiamiCoder.com.

grid-grouping-2

Continue Reading →

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 →