sencha-logoIf you’ve been following along the last couple weeks, we’ve been walking through the process of building a real(ish) application using ExtJS 4.2. We’ve made great progress, and we’re literally on the precipice of bringing together all the supporting pieces that we’ve been building thus far.

While I’m wrapping up the next installment, I have some homework for you :) If you’ve been building your app in tandem with these walkthroughs, I’d encourage you to tackle the list I describe below. Not only will this put in place some pieces that are necessary for the next steps (and which I won’t necessarily cover in any detail), but will also give you a chance to try out some stuff on your own and get some very useful experience under your belt before we continue.

The Homework

New CRUD Lists

The first thing to tackle is a few more of our favorite CRUD grids:

  • Make
  • Model

Both of these can have the same structure as the Color, Category, Feature, etc. tables. However, to make things a bit interesting, we’ll also want to create a foreign key on Model that will associate the relevant Make.

NOTE: As you’ll remember, our “option” editable grid is used by all our CRUD tables. it is definitely possible to specially integrate an additional column (such as a Make ComboBox for the Model list)…bonus points for that. If you get stuck, though, feel free to sub-class the main option List view and handle it that way

The Car

The thing to knock out is to create a Car table. Here are the fields I defined:

  • CarID
  • MakeID (fk)
  • ModelID (fk)
  • CategoryID (fk)
  • Description (varchar)
  • Year (int)
  • ListPrice (int)
  • SalePrice (int)
  • AcquisitionDate (datetime)
  • SaleDate (datetime)
  • IsSold (bit)
  • StatusID (fk)
  • ColorID (fk)

Additionally, we’ll need some “link” tables to tie our Car together with other data points. Here are the link tables:

CarFeature (for storing features for individual cars)

  • CarFeatureID
  • CarID (fk)
  • FeatureID (fk)

CarStaff (for storing which staff members were a part of the sale)

  • CarStaffID
  • CarID (fk)
  • StaffID (fk)

This will be enough to get started. However, if you want bonus points, go ahead and take a stab at creating a List view (using Ext.grid.Panel) and a Form view (using Ext.form.Panel) with the appropriate fields (text fields, date fields, combo boxes, etc.) for managing the data patterned above. If you’re feeling particularly froggy, try creating the Controller to manage this section of the site, and see if you can get all the pieces wired up together.

The next installment of this series will be ready soon. In the meantime, keep coding and keep having fun!