Posts tagged Javascript

Documenting ExtJS/Sencha Touch Code with JSDuck

Jan 28th

Posted by existdissolve in ExtJS

No comments

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:
, , , ,

Sugar: A Bit of JavaScript Sweetness

Jan 5th

Posted by existdissolve in JavaScript

3 comments

Twitter never lets me down 🙂

Today, I stumbled upon Sugar,  a really nice–and small–JavaScript library. Unlike monster libraries such as jQuery and ExtJS (which are awesome in their own ways…), Sugar is narrowly focused. It’s niche is simply extending native JS objects with intuitive methods.

So want to capitalize the first word in a string? Easy: string.capitalize(). Want to replace dashes/underscores with spaces? Nothing to it: string.spacify().

I’ve worked up a quick couple of demos of a few of the string methods, just to show how dead simple Sugar is to use. Of course, you should check out Sugar’s API for the full enchilada. Mmmm, enchildas…

Impressions

While I am a die-hard ExtJS user, there is something about the simplicity of Sugar that I really like. While it certainly won’t give you the tools to build a full-fledged web app with components, data grids, and what-not, it’s perfect for the small or one-off websites/pages where JS’ native objects could use some extra lovin’.

The one drawback (and it’s a slight one) is that there does not appear to be a way to do a custom build of Sugar to include *only* those methods which you need. According to their blog, this is because of some internals of Sugar More >

,

ItemClick and ItemContextMenu

Jul 8th

Posted by existdissolve in ExtJS

No comments

Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable–they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.

For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:

this.control({
    "bookmarks": {
       itemclick: function(...) {
          ....
       },
       itemcontextmenu: function(view,record,item,index,e) {
          var me = this;
          var r = record.data;
          e.stopEvent();
          if(item.ctxMenu) {
              item.ctxMenu = new Ext.menu.Menu({
                 items: [
                    {
                       text: "Delete This Thing",
                       icon: "images/delete.png",
                       handler: function(btn) {
                          me.deletebookmark(record,item);
                       }
                    }
                 ]
              });
         }
     }
})

One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.

To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including:

  • any keys that triggered the event
  • whether Ctrl was pressed
  • whether Shift was pressed
  • what “type” of event (e.g., “click” for a mouse event)

Armed with this information, I was able to adjust my “itemclick” listener a bit, More >

, , ,

Sencha: Defining Store Fields

Oct 11th

Posted by existdissolve in ExtJS

No comments

If you’ve ever created a data store with the Sencha framework, you’re familiar with defining the “fields” for the store’s data.  Something like this does the trick:

var myStore = new Ext.data.JsonStore({
     id: "myJsonStore",
     url: "datasource.js",
     fields: [
          "id",
          "name",
          "age"
     ]
});

This method of defining data fields works perfectly well, but is not very extensible.  After all, what if you have several stores for which you want to use the same field definitions?  Yeah, you can define the same fields for each store, but wouldn’t it be better to define it once, and then customize it as needed?

Fortunately, this is super-simple to do.  When you define fields “inline” while creating the data store, what you are really creating is something of an impromptu MixedCollection (a Collection class that maintains both numeric indexes and keys and exposes events, per the docs).  Ah, so if it’s nothing more than a Sencha object, we can abstract it from the store itself, and reuse it to our heart’s desire!

var mydef = new Ext.util.MixedCollection();
mydef.addAll([
      "id",
      "name",
      "age"
]);

Obviously, this looks extremely similar to what we did inline.  However, the huge difference is that this new, abstracted object has some handy methods for retrieval, addition More >

,