Fiddle, Sencha Style!

I’ve blogged about this before: I really love jsFiddle, the excellent online JavaScript snippet creator/editor. One of the reasons I REALLY like it is because it allows one to use the latest(ish) version of ExtJS. One of the reasons I DON’T like it is because I have to setup the environment every time to use ExtJS. Sure, it only takes a few seconds, but wouldn’t it be great if Sencha had their own flavor?

Well, this week at SenchaCon, we saw a sneak peek (perhaps not intentional…?) of a beta version of Fiddle, an online JS snippet editor/profiler. The big pull for me, of course, is that Fiddle already knows about ExtJS/Touch, so getting setup for creating a snippet is instantaneous.

Here are some the major features:

Choose Your Framework…and Theme!

When composing a new fiddle, you can easily select from any of the currently available library versions…all the way back to Ext JS 2.3.0…whoah. Additionally, for Ext JS 4.2.x, you can even select the theme that you’d like to apply to the rendered content.

Mocking Data

Mocking data for stores and other AJAX requests is pretty slick. At the bottom of the main editing area, you’ll see the typical tabs for JavaScript, CSS, More >

ExtJS 4.2 Walkthrough — Part 11: Executive Dashboard

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 >

ExtJS 4.2 Walkthrough — Part 10: Workflow

Wow! Part 10 already! Looking back over the last 9 sessions, we’ve accomplished A TON. Starting from scratch, we’ve generated a brand new app, developed a nice little inventory management system, wrapped it up in role-based security, and even implemented a few shiny reports. We should feel pretty good about what we’ve accomplished, and so should our boss.

As is typical, though, pat-on-the-backs for a job well done generally come bundled with a list of 20 more things that need to be done…yesterday. In our case, management wants us to implement a role-based workflow system that will allow them to more granularly track how inventory products go from initial creation to a final “Approved” status.

This is no problem for us, however. By now, we’ve been around the block a few times with ExtJS 4.  Sure, the details vary from task to task, but we’ve found the sweet spot for attacking problems and solving them with code. All that’s left is to implement the skills that we are mastering on a daily basis.

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

The Requirements

As mentioned, we need to implement a simple workflow process into our inventory management. While the workflow process will not alter the “how” More >

ExtJS 4.2 Walkthrough — Part 9: Oooh, Shiny!

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 >

ExtJS 4.2 Walkthrough — Part 8: Logged In

Things have been going great. We’ve been plugging along in our app, making cool input forms and more or less getting to a place where we felt we had something that works. And then the bombshell.

One of the business users asked about the login form. Login form? Our impression up until this time was that this app was being developed for one person to use. And because we were going to keep this behind our internal network firewall, there really wasn’t any need for user authentication, session management, etc.

Well, so much for that assumption. Now not only do we have to provide some form of user authentication, the higher-ups also want to restrict access within the app itself to certain parts, so that only certain users can access certain sections.

We freeze for a moment, and feel that strange feeling of panic start to arise. But then we realize: oh yeah, we’ve been developing an ExtJS application. All of this will be easy, and will only require the most minor of refactoring.

Content in this thought, we return blissfully to dungeon raids in Cube World.

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

User Authentication and Roles

While the story above is probably a More >

ExtJS 4.2 Walkthrough — Part 7: Some Polish

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.

A Few Additions

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?).

Drive Train Options

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.

New Car Fields

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 >

ExtJS 4.2 Walkthrough — Part 6: The Big Form

After a few weeks off, we’re back to it! Hopefully, you’ve done your homework and are caught up 🙂

We’ve been working over the last several sessions on laying down some supporting pieces for some real functionality within our application. Not that we haven’t been doing “real” stuff to this point; but most of the pieces have been admittedly simple and are parts of the app that will be used infrequently. That is, managing car colors, categories, makes and models isn’t particularly “business logic”–they’re just ancillary (although necessary) parts of a greater whole.

But now that we have several of these foundational elements in place, we can really start plugging away at the core purpose of our app, which is Inventory Management.

So without further ado, let’s get to it.

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

Our Goals for this Session

In this installment, we want to tackle the following:

  • Build an Inventory Form for entering data
  • Wire up form to a new controller for adding/editing inventory records
  • Display inventory records in a grid (surprise, surprise!)
  • Build a search form for our inventory records

Our inventory management form is actually going to be a bit complex (not in difficulty, but in data collection), so we won’t actually finish the whole thing More >

My CBDW.2 Sessions

Wow, yesterday was awesome! My sessions went well (at least I think so), and I’ve received a lot of positive feedback from the discussions.

For everyone who attended, thanks very much for your participation…it definitely means a lot and I hope the sessions were as informative as they were fun to create.

If you didn’t get a chance to attend, the sessions recordings have been posted (see links below).

ColdBox Developers Week is not over, though–there are still a TON of great sessions through the remainder of the week, so be sure to check out the lineup and attend as many as you can. I promise you will not be disappointed!

Criteria Builder In Action Building CKEditor Plugins for ContentBox


Share this: