Javascript

Another post on a Sencha Touch 2 feature that I initially thought was absent in the framework altogether, but was found hidden within its elaborate (and often tricky) source code.

I needed a CompositeField for Touch 2, but having a look at its api documentation, it was no-where to be found. I continued my search into Touch 2's source files as earlier also, I have found classes/components I needed there but without a corresponding mention in the api docs.

Last in the series of posts on menus and associated custom components for Sencha Touch 2, I would present SplitButton component for Touch in this blog post.

First things first, here's a live example:

Followed by the code for the Splitbutton component:

Continuing with my previous blog post on a Menu component for Sencha Touch 2, here I present a DropDownButton component for Touch 2 supporting any depth of nested sub-menus for the drop-down.

First a live example:

Now the source for the DropDownButton component:

I did some interesting things with Sencha Touch over the last month, and I am going to share some of them in a series of blog posts over the next couple of days. But I am running really short of time. So I would let the code do the talking, and there would be minimal explanations (if any) in the posts themselves on what the code does and how.

Nothing is probably more frustrating for a developer than a framework/api providing some feature but not documenting it. No doubt, this would have happened to you multiple times. For me, two very different frameworks (well one was a framework and the other an api) posed the challenge over the last week to explore them without complete documentation.

So I have been playing around with this nice web toolkit for mobile platforms called Sencha Touch (the latest version, Touch 2 that's in its Developer Preview 2 at the time of writing this blog post) during this month.

It feels good to be blogging again after a gap, the last couple of months or so have been way too hectic. Although I expect the schedule to remain clogged up for some more time, I will try to squeeze in some blog posts over the next couple of days. So, lets now come to the topic of this blog post, Ext.clone in ExtJs/Touch resulting in stack overflows while trying to clone an object containing circular references.

I yesterday did a very interesting thing, integrating ExtJs with the excellent iScroll 4 script from Matteo Spinelli that would make my ExtJs containers intuitively scrollable on Touch devices (especially iPad) giving them a more native scrolling feel.

I yesterday faced a very peculiar situation. A component from one of my web apps started throwing javascript errors on my iPad Safari as I was trying out some things from the app. It was a bit surprising as I had successfully tested the same component at the beginning of this week on the same iPad without any issues, no changes had been made to the component and nothing else struck me when I faced the issue. The fact that the same component was running successfully on all versions of all major browsers on a PC confused me further.

Let me disclaim straight away, this blog post is based on blatant copy of Eli Grey's object.watch gist on GitHub. The small script proved so useful to me in a tight situation (I think last to last week) that with full acknowledgement of this being his work, I wanted to roll it up into a blog post.