Ext JS Grid Search with .NET and MySQL Backend

Building a “live” search feature for an Ext JS Grid is pretty simple. This tutorial shows you an example of how to set up this search feature for an Ext JS Grid that is connected to a .NET and MySQL backend.

The Ext JS application that we will build in this article has a Grid that displays data about the albums of a hypothetical music collection. A search box in the Grid’s Toolbar will allow users to filter the albums by title or artist. As a user types in the search box, the Grid will pull filtered data from the server:

grid-search-1

Continue Reading →

Mocha and Node JS – Testing the Backend for a Mobile Application

This Mocha and Node JS tutorial shows you how to test a Node.js and MongoDB backend for a mobile application. This article is part of a series of mobile application development tutorials that I have been publishing on my blog MiamiCoder.com, where we are creating a Meeting Room Booking mobile application with a Node.js and MongoDB backend.

featured-1

In the previous article of this series, we built the server-side AccountController module that will handle the user registration, login and logout features of the application. We implemented the AccountController’s public interface, along with a number of helper Classes that will allow the Controller to do its work. Our goal for this article is to create a set of unit tests for the Controller’s public interface (public methods) that will prevent us from breaking the application if we need to refactor the Controller in the future.

Continue Reading →

Ext JS Grid Editing: Adding and Deleting Records with a PHP Backend

This Ext JS Grid Editing tutorial shows you how to add and delete records with an Ext JS Grid and a PHP backend. It also shows you how to use an Ext JS ViewController to handle events generated from an Ext JS View.

grid-row-editing-13

This is the continuation of the Edit Data with an Ext JS Grid and a PHP Backend article, where we started building a small Ext JS 5 application that pulls hypothetical model cars data from a PHP page and uses an Ext JS Grid to present and edit these data. You should review that article before moving forward with this one.

In the first article we learned how to set up the ExtJS Grid and its RowEditing plugin to allow for edition of the Grid’s records. In this article we will add the features that will allow users to add and delete records.

Continue Reading →

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 a 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 →