ExtJS 4.2. App Walkthrough

With the successful roll-out of our workflow system, management has come up with another great idea: an Executive Dashboard. The main idea is that when anyone with the “Admin” role logs in, they should be greeted with a “dashboard” of sorts that will allow them to see a variety of details from across the application, such as snapshots of the charts we previously built, outstanding workflow actions, and the most recently added inventory records.

Of course, we’ve already built all this stuff, so we confidently respond that this is no problem, and we’ll have it done in a jiffy. So let’s get jiffy-ing!

NOTE: Code for this installment can be found on GitHub.

One of the best things about the way we’ve built our ExtJS 4 app is that we can now really start to benefit from reuse of code. Instead of having to re-create all the components (charts, grids, etc), we can simply instantiate them in new contexts and move on with our lives.

For this Executive Dashboard, we’ll reuse both of the charts that we created earlier, as we all reusing the inventory grid twice. Since we’ve already created stores and models for all of these, there’s ZERO that we have to create More >

In our last installment, we dealt with a very common occurrence that happens in the course of real-life development: putting out the fire of a managerial ad-hoc requirement. In our case, we implemented a login and role-management system (something which was not required in initial requirements-gathering). And even though this came out of the blue, we saw that the MVC structure and event-based development methodology of ExtJS allowed us to quickly and easily respond to the crisis. Phew.

But now, we’re back on track, and ready to develop some reports!

Reports are interesting things in the domain of the business application. In a lot of ways, reports are the ultimate goal. Sure, we need an inventory management system, and yes, being able to manage content for our Cars is really nice. However, from the perspective of the people writing our paychecks, the reports are where the real value comes into play. We can make the rest of the application as awesome as we like, but they’ll probably never use it or notice it. But if we develop some really nice reports that gives them instant visibility into what they care about…well, we’ve not only given them what they ultimately care about, but More >

In our last installment, we tackled the “Big Form”, the grand inventory management form that we’ve been working toward through our whole journey thus far. But even though it worked well enough, it was still incomplete, and we promised ourselves that we’d add in a few more features to polish it off, namely:

• Add Car image management
• Add restriction for Make/Model selections
• Add “detail” view to the car.

Since we always live up to our promises (:)), it’s time we knock this out!

NOTE: The code for this session can be found on GitHub.

Before we jump in headfirst, however, there are a few more supporting pieces we need to add. I’ll outline them below, and you can add them as you have a chance (it’s good practice, right?).

I created a new “Option” called “Drive Trains.” This should be managed under Options, and can have the same data structure as the other options. Eat, sleep, repeat.

I added a few more fields to the Car model to make it more realistic to something that might actually exist:

• VIN (string)
• StockNumber (string)
• Mileage (number)
• Fuel (string)
• Engine (string)
• Transmission (string)
• Drive Train (option/combobox)

After you add these to your database and ExtJS model, also add fields for these into the More >