Archive for November, 2014

Ext JS 5, Sencha Fiddle and Parse.com

Nov 25th

Posted by existdissolve in Ext JS 5

6 comments

As I’ve used Sencha Fiddle, I’ve really come to enjoy how simple it makes testing ideas, exploring aspects of Ext JS, and debugging my code. One of the really nice features is the ability to simulate AJAX requests. While this is REALLY nice for simulating the loading of remote data, one place where it has a gap is in testing a fully-rounded workflow…for example, loading data from the server, modifying it, sending it back to the server, and receiving a successful response.

For these kinds of tasks, there a few options. First, you can set up your own server which your Fiddle code can talk to, either via CORS or JSONP. While this works, it’s a pain. Most of the time the stuff I’m doing in Fiddle is not that involved, so having to mess with a server just for remote communications is a little onerous.

Another option is Parse.com. Using this service, you can create and manage cloud-based data structures. And using their RESTful API, you can retrieve this data, as well as all the other standard CRUD operations.

Integrating Parse.com with your Ext JS app (or Sencha Touch app) is RIDICULOUSLY easy. I’m going to assume you’ve already set up your More >

,

References in Ext JS 5

Nov 15th

Posted by existdissolve in Ext JS 5

1 comment

One of the most common tasks for a developer when developing an Ext JS application is dealing with the complexity of nested components. For example, let’s say that you have a simple Ext.panel.Form definition that resembles something like this:

  • Form Panel
    • Toolbar
      • Save Button
      • Cancel Button
    • Field Set
      • Field Container
        • Field 1
        • Field 2
      • Field Container
        • Field 3
        • Field 4
    • Field Set
      • Field Container
        • Field 5

Leaving aside all that Ext JS does behind the scenes to simplify management of forms in general, we see that even a simple form definition like this has a fairly complex structure.

Now to the task at hand: given this complex structure, how do we go about retrieving a given component from within this hierarchy? For example, let’s say that we want to specifically target Field 5. How do we do it?

By Id

One approach that was used in the past was to manually assign an id to the component and use Ext.getCmp() to retrieve it.

// field definition
...
{
    xtype: 'textfield',
    id: 'myfield'
}
// let's get it...
var field = Ext.getCmp( 'myfield' );

The really nice part of this is that it’s fast. The downside, however, can be pretty significant. Since the id has to be unique, you not only have to manually More >