Sencha Designer 2 Beta is out

I am a big fan of Ext Designer 1.2. It saves a ton of time designing a UI. Doesn't help much with MVC or writing code though.

It has been re-branded as Sencha Designer 2 (due to Sencha touch integration), and has built-in code editing and MVC! The beta is out now.

You can try it here:

http://www.sencha.com/forum/showthread.php?152941-Sencha-Designer-2-Beta-Download-links

Sencha didn't link to the docs anywhere, but here they are:

http://docs.sencha.com/designer/2-0/

An ExtJS MVC application with dynamically loaded views and controllers

Here's a slightly more complex MVC application, that allows for dynamic loading of controllers and views:



here is the jsfiddle code

How to handle ExtJS AJAX events and errors, including automatic login

Here is how to handle AJAX errors and events in ExtJS, using JSFiddle



here is the code

How to raise and handle errors in ExtJS

Here is how to raise and handle errors in ExtJS



here is the code

How to simulate ExtJS AJAX requests in JSFiddle

Here's how to simulate AJAX requests using ExtJS and JSFiddle, using the SimManager user extension

Please note that this user extension only supports GETs for the moment. It's not mine, but I will try to update it to support POSTs too.



here is the code

How to load a single record into a store

Usually a store loads a list of records, but if you need to load a single record, do this:

var id = 9; //an example record id

var contactsStore = Ext.StoreManager.get('contacts');

contactsStore.load({
  id: id, //set the id here
  scope:this,
  callback: function(records, operation, success){
    if(success){
      var contact = records[0];
      //do something with the contact record
    }
  }
});

this will send an async request to your server, using the store or its model's proxy, with the read api or its url, something like

/api/contacts/read?id=9

How to observe all the events on a view

Here's how to observe all of the events on a view:

var view = Ext.create('My.view.SomeView');

Ext.util.Observable.capture(view, function(){
  console.log(arguments);
});

This will show output in the console window whenever an event happens to the view, such as render. A useful debugging tool.

An easy way to get a reference to the viewport from any controller

Here's an easy way to get a reference to your viewport from any controller:

Ext.application({

  launch: function(){

    this.viewport = Ext.ComponentQuery.query('viewport')[0];


    this.centerRegion = this.viewport.down('[region=center]');

  }

});

then, inside say, a controller, you can call this:

this.application.viewport

to get a reference to the viewport.