Sencha Designer 2 Beta Walk Through

The Sencha Designer 2 Beta is a full-on IDE for MVC based JavaScript applications built over Sencha Ext JS and Sencha Touch frameworks. That's a lot of acronyms for one sentence, so allow me to recap. Sencha Ext JS is a framework for building rich JavaScript applications complete with all the goodies we've come to expect like data grids, trees, charts, windows, tabs and so on. Sencha Touch does the same thing for mobile applications.

In this blog, we'll take a look at the environment and build a simple data-bound grid.

Sencha Designer 2 brings a visual designer with a toolbox, Project Inspector, properties and events window. Here's a quick first look at the designer. For anyone that's worked in any popular programming IDE, there aren't too many surprises about the layout. You have a Toolbox on the left that includes a nice help panel with documentation links. You have the ability to filter and categorize all the tools; very handy when you have a large number of widgets. The center area is a drag-and-drop user interface Design tool and Code editor for anything selected in the Project Inspector.

One of my favorite Project Inspector features is the default MVC application structure. You can drag from the toolbox to the appropriate node in the Project Inspector or double-click the Toolbox item to place it automatically in the correct location within the MVC structure.

For example, if you double-click a Panel in the Toolbox, the Panel will show up in the Designer and under the Views node in the Project Inspector automatically.

 

If you save the project, Sencha Designer 2 creates a directory structure that includes the project "xds" file and the "designer.html" (the entry point for the entire application).

Running "designer.html" in a browser, loads the "designer.js" file and the entire application is displayed.

The example that follows will not make complete use of the MVC structure, but instead use a model, store and view to display a simple list. The controller features will be left to another blog. For those following along at home, setup a web application in the HTTP server of your choice, e.g. IIS or Apache to store your project and generated files.

The Model

Let's try loading a grid with simple information and images. The data below has a few records of JSON data: a category name for travel deals, a count of deals and a path for pictures representing each category.

[{
        "name" : "Airlines",
        "count" : 58,
        "picture" : "airline.jpg"
    }, . . .
    }]

Before we can use this data we need a Model to tell Sencha the structure of the data and a Store to serve data to the grid. Drag a Model off the Toolbox to the Models node in the Project Inspector. Drag Field components from the Toolbox to the new Model, one for each of the three fields in the data. Select each Field and set the name property to match the name in the JSON data. Set the type properties to "string" for the "name" column, "int" for the "count" column and "string" for the "picture" column. Set the userClassName property to "DealModel". The completed model looks something like the screenshot below.

The Store

Now drag a Json Store from the Toolbox to the Stores node in the Project Inspector. The Json Store comes automatically with an Ajax Proxy to load the data and a Json Reader to interpret the server response. In this example, we're going to use the Json Store and ignore the other two components.

Instead of using the proxy and reader, we're going to assign the Json Store's data property directly from an array of JSON objects. Paste the JSON below into the data property of the store. Also, set the userClassName and storeId properties to "DealStore" and model property to "DealModel". The storeId is used later to consume the store's data.

[{
        "name" : "Airlines",
        "count" : 58,
        "picture" : "airline.jpg"
    },
    {
        "name" : "Cruises",
        "count" : 102,
        "picture" : "cruise.jpg"
    },
    {
        "name" : "Hotels",
        "count" : 95,
        "picture" : "hotel.jpg"
    }]

The store properties in the Component Config window should look something like the example below.

Testing the Store

How do you know that the store is setup correctly? Right-click the store and select Load Data from the context menu. If there's a problem, an error icon will appear to the right of the store node. If everything is happy, an "eye" icon appears. Click the icon to display the JSON data. This is especially handy for checking data coming through a proxy from an external location. 

The View

Now that the data is correctly loading into the store, we can build the view and hook it up to the store data.

Drag a Grid Panel from the Toolbox to the Panel already out in the Design surface. Note: you can drag the Grid Panel directly out on the Design surface without a Panel to act as a container. In that case, the Grid Panel becomes the top level view.

The Grid Panel is pre-populated with form fields of various types. Right-click the column heading of any column to show the context menu. Use the Delete option from the menu to remove all but two fields.

Right-click the first column and select Transform > Ext.grid.column.Template from the context menu. Select the first column again, navigate to the Component Config pane, click the tpl property and paste the following in the drop down entry:

<span style="float: right;margin:5px">{name}</span>

This minimal template simply displays a span that is bound to the "name" column of the data in the store. Later we can add more free-form markup to display images. Also set the dataIndex property to "picture" and text to "Category".

Select the second column and set the dataIndex property to "count".

At this point the configuration is far enough along that we should see some data.  We need to point the Grid Panel at the store to get its data. In the Component Config pane, set the store property using the drop down list to "DealStore".

Now the data should display for both columns in the grid.

Just a quick recap on the minimal pieces we used to show data in the designer:

  • An array of JSON objects.
  • A Model with Fields that map to the properties of the JSON object.
  • A store that references the Model and has the data property defined. Note: Data can be defined using the data property directly or by configuring a proxy and reader.
  • A view that references the store.

You can clean up the panel and column titling by double-clicking any of the text and enter new text directly within the Design surface. To get rid of the "My Grid Panel" heading, select the Grid Panel and click the title property icon to clear it. We can also set the format property of the second column to "0,000" to show the expected integer representation of the "Count" column.

Adding Images to the Template Column

The JSON data "picture" has the file names of several images that can be referenced in the template column. Create an "images" directory in your project at the same level as the "app" folder. In this example we have three images "hotel.jpg", "airline.jpg" and "cruise.jpg"; names that correspond to the names in the JSON data "picture" column.

Change the first column tpl property to use the markup below. An "img" tag has been added to the template with the "src" attribute pointing to the images directory and with the "picture" column supplying the image file name.

<img src="images/{picture}" style="float: right;height:75px;width:100px" />
<span style="float: right;margin:5px">{name}</span>

Running in the browser, the application looks something like the screenshot below.

comments powered by Disqus