existdissolve.com
the singularity of being and nothingness
ExtJS 4.2 Walkthrough – Part 3: Under Control(ler)
May 21st
Yep, I lied. In the last post, I said we were going to start making data models and whatnot. All lies. We could, of course, plow ahead with making a data model. However, our app is not quite ready to support a data model of any kind, so we’d make it and have to set it aside until later. Instead of doing that, let’s just wait to make it until later and spend our time on something that will get us closer to being able to use it. Good? Excellent.
A Bit About ControllersNOTE: Code for this installment can be found on GitHub.
Controllers within ExtJS 4 MVC apps are the brains of your application, the place where the vast majority of your application’s functionality and logic will (and should be) stored. By design, ExtJS 4 is event driven, so your controllers are really like souped up event listeners.
Pretty much every component (views) and data object (stores, models) will fire off a number of events based on the context. So for example, when your store makes an AJAX request via a server proxy, the store (via the proxy) will fire a load event. In your controller (and elsewhere), you can listen to this event and More >
ExtJS 4.2 Walkthrough – Part 2: Main Layout
May 19th
In the last post, we jumped through the hoops of setting up a brand new ExtJS 4.2 application, and we even “upgraded” it a bit by switching to the fresher “Neptune” theme. But after all of that, we were left with a fairly lame application. It works, of course, but doesn’t do anything. We need to fix that.
In this installment, we’ll take the mockup that we looked at previously and create some code to prepare the main skeletal sections of the app, including:
- The header
- The left side bar
- The main content area
Getting these in place will let us begin surgically creating various parts of our application. Hooray!
An Aside: Dynamic LoadingNote: Code for this installment can be found on GitHub.
Unless you specifically go another direction, ExtJS 4 applications are going to be a single-page application, driven by a single, “compiled” version of all the JS classes that are required to make your application run.
When developing the application, however, it is certainly not ideal to have to compile the application every time you want to make a change. To facilitate super-rapid development, ExtJS 4 includes a very robust Dynamic Loading system. While we won’t dwell on the intricacies of it here, this Dynamic Loading system allows More >
ExtJS 4.2 Walkthrough – Part 1: Setup
May 19th
Welcome to the first installment in our series on developing an MVC-style ExtJS 4.2 app!
As mentioned in the Introduction, the app we’ll be developing will be a simple management system for a car dealership. The name of the app is so super-creative it will blow your mind. Are you ready for this?
The name of the app is: Car Tracker
Car Tracker?
Yes, Car Tracker.
That just changed your life forever…you’re welcome 🙂
Getting StartedNOTE: Code for this session can be found on GitHub.
The first step to creating our app is, of course, to make sure that we have the framework, as well as Sencha Cmd, which we’ll use to generate, theme, and compile the app.
- Download ExtJS 4.2.0 GPL SDK
- Download Sencha Cmd (3.1.1.274)
- Make sure you have Ruby 1.9.3, not 2.0 (otherwise, Sencha Cmd won’t work right for some things)
- Go ahead and bookmark the online docs for ExtJS 4.2.0. Not only are they pretty, but super-useful.
Once you’ve downloaded the 4.2.0 SDK, extract the files. I like to put the SDK in a common location. On my Mac, I put mine here:
~me/sencha/extjs/ext-4.2.0
Ultimately, it doesn’t matter where you put it, as long as you can find it later.
Step 2: Install Sencha CmdOnce you’ve downloaded Sencha Cmd, More >
New Project: ExtJS 4.2 App Walkthrough
May 19th
Over the last few months, I’ve been building (and reading about building) a number of applications using the excellent ExtJS 4.2.0. I thought it might be fun/instructive to do something of a short “walkthrough” of the process of building an app…so that’s what I’m going to do :).
In the next series of posts, I’m going to build an MVC-style ExtJS 4.2.0 app, walking through the code and strategy at each step along the way. I hope that it will be entertaining/instructive to code along with me.
The AppThe app is not going to be complicated, but I am going to try to hit some major areas of functionality that are common to developing ExtJS 4 apps. While I can’t promise that every bit of functionality will “fit” your real app’s specific needs, I do promise to avoid ridiculous, over-simplistic and unrealistic examples. My intention is to share my experiences from building real apps, not to teach you about every possible aspect of the ExtJS 4 library, regardless of how relevant it may or may not be to what we’re building. Besides, I don’t know every possible aspect of the library anyway, so I would be of less-than-complete help in that More >
Criteria Builder Quickie: Disjunction
Mar 12th
If you use ColdBox’s awesome CriteriaBuilder at all, you know it’s dead simple to create complex AND dynamic criteria queries. If you’re like me, a lot of your criteria queries are a bunch of “and”s built together. For example, let’s imagine we’re trying to get all the cars from our database that have a make of Ford and a color of Red. A simple criteria query for this might look like:
// create criteria
var c = newCriteria();
// add criteria
c.isEq( "Make", "Ford" )
.isEq( "Color", "Red" );
// get result
var result = c.list();
Pretty simple, right?
Of course, not all queries are “and“s. Sometimes, you need to do an “or“. Perhaps we want to get all the cars that are Ford OR Red. Again, this is very easy with CriteriaBuilder:
// create criteria
var c = newCriteria();
// add criteria
c.or(
c.restrictions.isEq( "Make", "Ford" ),
c.restrictions.isEq( "Color", "Red" )
);
// get result
var result = c.list();
While this works, it’s not complete. Sure, there are some scenarios where you will know ahead of time what criteria you want to use in a criteria query. However, consider a scenario in which you have a search form in which a user can select from a list More >
Documenting ExtJS/Sencha Touch Code with JSDuck
Jan 28th
This will be a short post, I promise 🙂
Recently, I posted my version of a time picker in Sencha Touch 2. As part of this, I wanted to *really* document the component. I decided to leverage JSDuck, the tool which is currently used by Sencha to provide API documentation for…well…everything that they do.
Beyond looking pretty flipping sweet, the awesome part about JSDuck documentation is that it’s in the vein of “self-documenting” code. That is, beyond a few configuration comments you might make here or there, nearly everything that JSDuck spits out in terms of documentation (or is that duck-umentation…ugh) comes directly from the code you write anyway. Pretty nifty.
Anyway, if you’re interested, check out the documentation for JSDuck, and enjoy the screenshots of my documented component below.
Share this:
Sencha Touch 2: Ext.ux.field.TimePicker
Jan 27th
Today I wrapped up work on a custom Sencha Touch 2 form field component called TimePicker which, as indicated by its name, allows you to select a custom time via the faux-OS picker dialog.
There are a bunch of other TimePickers out there for Touch, but most are old or just don’t do what I want them to do. So I made my own 🙂
If you’re interested in using this, head over to my GitHub repo and pull it into your project. There’s a bunch of config, but it’s all documented in the repo.
If you do end up using it, please let me know what you think. I’d love feedback on usefulness, suggestions for improvements, etc.
Share this:
CKEditor Plugin: Redux
Jan 21st
In my last post, I showed how it’s not only possible, but also pretty dang easy to make a custom CKEditor plugin that can interact seamlessly with a module. While it worked pretty well in modern browsers, it completely bombed on older versions of Internet Explorer (surprise, surprise).
The main *problem* with older IE support is the use of a custom html tag (<fiddle>) to store the complex data type in CKEditor. Not only does CSS styling on this unknown element fail in <IE8, but it’s insertion into CKEditor also fails completely, presumably because of the old DOM implementation.
While annoying, this is hardly a deal killer. The choice to use a “fiddle” element was hardly required…I did it because I wanted to. However, in the spirit of backward-compatibility, I’ve updated the plugin to work with a plain-old <div>.
Without further ado, here are a relevant pieces that I’ve updated:
EntryHelper.cfm (The File Where the Insertion Occurs)/*
* Common method to prepare fiddles for insertion...and insert them
* @inputs - collection of inputs
*/
function prepareFiddle( inputs ) {
...
// create double-mustache syntax
html += '
<div id="cbjsfiddle">jsFiddle - {1}'.format( vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6], vals[7], vals[8] ); // insert into More > ContentBox: Creating a CKEditor Plugin for Complex Data Types
Jan 19th
I recently developed a simple module for ContentBox called jsFiddle. Basically, it allows you to insert “fiddles” from the excellent http://jsfiddle.net into your posts and pages. In developing this module (and CKEditor plugin), I wanted to be able to insert complex data into the content editor, but then be able to re-edit that content after insertion. I’m pretty happy with how it turned out.
In the following paragraphs, I’m going to walk through the process of developing a ContentBox module that includes a CKEditor plugin which is capable of content re-editing. Hopefully this will inspire some others to develop some killer new ContentBox modules with helpful CKEditor plugins.
Some ContextNOTE: In this walkthrough, i will include snippets of code, but most of them will be severely trimmed for the purposes of this post. If you really want to follow along with the full code, please grab it from the GitHub repo. Furthermore, I’m not advocating that this is the “best” or “only” way to accomplish this. My only intention is to share some ideas about things that have worked for me. So if you have corrections or suggestions for how things can be done better, I’m always ready and willing for civil, constructive feedback 🙂
Before we More >
CKEditor and ContentBox: A Fun Editing Option
Jan 13th
Over the last two days, I’ve been playing around alot with a new plugin that I’ve been working on for inclusion in CKEditor, expressly for the purposes of creating a very handy way of inserting snippets of code, decorated by Syntax Highlighter, into ContentBox‘s content editor.
Some of the functionality I’ve been playing around with is the different ways in which you can trigger “edit” events on elements in CKEditor, primarily for the purpose of opening a modal window and allowing for editing of the element’s properties (such as href, title, class, etc.). This weekend, I brought the options in the new plugin I’m working on up to the following:
- Via link in context menu
- Double-clicking the element
- And the most interesting…using jQuery to help overlay an inline-tooltip (see below)
In my next post, i’ll describe how to do this…just wanted to put out a teaser before I sleep and prepare for the new week!
Share this:
