Sencha Inc. | HTML5 Apps

Build a Car Store with Ext Designer 1.2 and Ext JS 4

Published Sep 19, 2011 | Devshi Pindoria | Tutorial | Easy
Last Updated Dec 06, 2011

This Tutorial is most relevant to , 1.x.

Introduction

Ext Designer 1.2 is now available as a free upgrade for current customers. It includes support for the Ext JS 4 framework and charts, and features vastly improved documentation and a number of bug fixes. Read more about the release in our announcement blog post.

In this article, we will use Designer 1.2 to take the previous “car store” sample project, upgrade it to target the Ext JS 4 framework and add some new chart-related functionality. You can go through the tutorial using the trial version of Designer 1.2.

We have also attached the complete project source at the end of the article, so you can review all of the code for the tutorial.

A pre-requisite to building the Car Store application is a (local) web server, so you can test and share the application. If you need help installing or configuring a server, we describe steps for both Mac and Windows in our Quick Start guides. In this article, we are going to assume you have the server running and available on “http://localhost/”.

Here is a preview of how the running application looks, after completing this tutorial:

CarStore

Project Setup

First, let’s copy the data that we will use for this sample. In your web server’s root folder, create a “carstore” folder for the application. Also, create a “data” sub-folder in your application folder and copy the JSON file (containing the data, as per the attachment) into the “data” subfolder. Verify that the application web folder structure looks like the following:

carstore
    data
       cars.json
       250px-2007_Audi_TT_Coupe.jpg
       250px-Audi_S5.jpg
       250px-BMW_M3_E92.jpg
       250px-Nissan_GT-R.jpg
       2004_Porsche_911_Carrera_type_997.jpg

Now, let’s get started with building the UI.

Launch the Ext Designer 1.2 and create a new project that targets Ext JS 4.0.x framework.

Update the project settings, so the project files and data references points to the web server location. Select Edit > Project Setting… menu and set the following values:

CarStoreSettings

Component Layout

Now we will build the skeleton of the UI, correctly laying out the grid, detail and charts panels.

  • Add a Panel container onto the canvas. This is the top-level component for the Car Store application.
  • Add a Grid Panel into the Panel container that you added above. The grid panel will be used to display the available car listings and enable the user to select a listing to view.
  • Drag a second Panel into the Panel container. This panel will display the car details for the selected car.
  • Drag a third Panel into the Panel container. This panel will display the quality chart for the selected car.
  • Add a Column Chart to the third panel we just added.
  • Click the fly-out config button on the top-level panel and set the layout to ‘vbox’, alignment to ‘Stretch’ and check auto-scroll. This will arrange the grid and sub-panel vertically.
  • Set the flex attribute to 1 for the Grid Panel, as well as for the two sub-panels via the Component Config inspector.
  • Double-click the title bar of the top-level Panel to edit its title and change “My Panel” to “Car Listings”. This is the same as setting the title attribute in the Component Config inspector.
  • Double-click each column heading in the grid to set them to “Manufacturer”, “Model” and “Price”. This is the same as setting the text attribute through the Component Config.
  • Delete the fourth grid column, which we do not need.
  • Remove the title bars from the grid and sub-panel by selecting each component and clicking the delete icon (x) to the right of the title attribute in the config panel.
  • Save the project to the web server application folder created earlier, naming it ‘carstore’.

After you have followed the above steps, your UI should look like the following:

CarStoreLayout

You can also see the code that is generated for the UI, by clicking on the Code button at the bottom of the canvas area.

Set Component Configurations

We will now configure various attributes for each component.

  • Select the Car Listings panel and set the userClassName attribute to “CarListings”.
  • In the Component Config, check the frame attribute of the Car Listings panel.
  • Now let’s configure object references for each component.
    • Set the id for the grid panel (top) to “grid”.
    • Set the id for the (middle) subpanel to “detail”.
    • Set the id for the chart (bottom) subpanel to “chart”.
  • To add some space padding around the contents of the bottom two subpanels, select each panel and update the padding attribute to 10.
  • Now, let’s configure the display template for the “detail” panel. Click the flyout config button on the “detail” subpanel and then click Edit Template to add a template for the detail information.
  • The body of the component becomes an editable text area. Enter the HTML mark-up for the template:

<img src="data/{img}" style="float: right" />
Manufacturer: {manufacturer}<br>
Model: <a href="{wiki}" target="_blank">{model}</a><br> 
Price: {price:usMoney}<br>

When you’re finished editing the template, click Done Editing.

After you have followed the above steps, your UI should look like the following:

CarStoreConfig

Configure Stores

Next, we will configure a JSON store and setup the correct data mapping for it:

  • Select the Data Stores tab and add JSON Store from the Data Stores toolbar.
  • Set the userClassName and storeId attributes to name the store “CarDataJson”.
  • Right-click the data store and add a total of 6 fields (select Add Fields > 3 fields twice, for example) to the CarDataJson. These fields will map directly to each record defined in cars.json.
  • Set the name attribute of each of the fields in the store to “manufacturer”, “model”, “price”, “wiki”, “img” and “quality”, in that order.
  • Next, set the data store URL. Note, at this point the project URL Prefix should already be correctly set (see earlier steps). Select the store Ajax Proxy node and set the URL attribute to the relative path where the store file resides, “data/cars.json”.
  • Set the correct data store root node. Select the store JSON Reader node, set the root config to “data”.
  • Configure the data store to load automatically by enabling the autoLoad attribute on the store.
  • Right-click on “CarDataJson” store and select “Load Data” from the context menu. Confirm that 5 records were loaded.

Next, we will configure a JSON store “proxy” for the chart panel. The data for this store will be loaded dynamically at runtime, as each car record is selected.

  • Select the Data Stores tab and add JSON Store from the Data Stores toolbar.
  • Set the userClassName and storeId attributes to name the store “CarChartJson”.
  • Right-click the data store and add total of 2 fields (select Add Fields > 2 fields) to the CarChartJson. These fields will maps directly to each attribute defined in quality field in cars.json.
  • Set the name attribute of each fields in the store to “name” and “rating”, in that order.

Since the chart data will be loaded dynamically (as each car record is selected), we do not need to configure the Proxy or Reader configurations.

Bind the Store data to Grid and Chart

We will now bind the store data to the UI component, specifically grid and chart panels.

  • Click the fly-out config button on the grid component and select “CarDataJson” to bind the grid component to the store.
  • Let’s now link each grid columns to the appropriate JSON store data fields. In the Components panel, right-click on the grid and select Auto Columns from the context menu. This will automatically map all data columns to the grid, correctly setting the columns name, title and type. Once this is done, actual store data should immediately display in the grid.
  • Click the fly-out config button on the chart component and select “CarChartJson” to bind the chart component to the store.

At this point, you should be able to preview the entire UI by clicking on the Preview button at the bottom of the Canvas.

Project Export and Event Handler

Let’s save and export the project. This will automatically create all the .js and other relevant files for the UI and event handling. We need to do this, so we can add/edit the event handling code.

  • Save the project: File > Save Project from the menu.
  • Click the Export button below the canvas. The project will be saved to the Export Path specified in the Project Settings.
  • Verify that the project files were exported. Using the appropriate file explorer, check that all .js and .html files are exported under the project root web folder.
  • Attach an event handler to display the car details and quality ratings data. Using any text editor, edit carstore/app/view/CarListings.js file and the add following code :
initComponent: function() {
   var me = this;
   me.callParent(arguments);
   var sm = me.down('#grid').getSelectionModel();
   sm.on('select', this.onGridRowSelect, this);
},
 
onGridRowSelect: function(grid, row) {
   this.down('#detail').update(row.data);
   this.down('#chart').store.loadData(row.data.quality);
}
  • Test the App by launching a browser and type in the following URL: http://localhost/carstore/designer.html
  • The application UI should display. Click on any data grid row, and the car detail should display along with the car image.

Chart Configuration

We are nearly done. We still need to configure the chart to display the quality information in the way we want.

  • In the Components panels, change the chart’s Category Axis title to “Category Factors”. In addition, make the following config changes for the x-axis:
    • Change the fields value to [‘name’] - this maps to the store field that is the x-axis value for the chart.
  • In the Components panels, change the chart’s Numeric Axis title to “Score”. In addition, make the following config changes for the y-axis:
    • Change the fields value to [‘rating’] - this maps to the store field that is the y-axis value for the chart.
    • Change the maximum value to 5 - maximum value for the y-axis
    • Change the minimum value to 0 - minimum value for the y-axis
    • Change the majorTickSteps value to 5 - force the major ticks for the chart to 5
  • In the Components panels, update the chart’s Column Series config label to reference the data field:
    • Change {'display':'insideEnd','field':'y','color':'#333','text-anchor':'middle'} to {'display':'insideEnd','field':'rating','color':'#333','text-anchor':'middle'}
  • Make the following additional Column Series config changes for the y-axis:
    • Change the xField value to “name” - to access the x-axis data from data store.
    • Change the yField value to “[‘rating’]” - to access the y-axis data from the data store.

Done!

Let’s now test the final application by launching a browser and typing in the following URL: http://localhost/carstore/designer.html

The application UI should display. Click on any data grid row, and the car detail should display along with the car image and the bound chart showing the car quality data for various categories.

In this tutorial, we built a complete web application using the latest release of Designer 1.2 targeting Ext JS 4 framework. Specifically, we demonstrated:

  • UI component layouts
  • JSON store configuration
  • Data binding to UI components
  • Chart configuration and dynamically loading chart data

I hope this was helpful and provided you with a good understanding of how you can design and build web applications using Designer 1.2. If you want to explore further, you can add more capabilities to this application that allow you to add a new car record or display one of the different types of charts instead of the line chart that I used, for example. Have fun!

Attachments

Here are the list of files referenced in this article:

Share this post:
Leave a reply

Written by Devshi Pindoria
Devshi is senior engineering manager and is responsible for the delivery of Sencha Designer and Sencha Animator products. Prior to Sencha, Devshi held various senior engineering management positions at Adobe, Autodesk and number of other companies, with focus on high quality delivery of desktop, mobile & web applications and development tools that delights customers.

8 Comments

Seth

3 years ago

In the article when configuring the proxy for the chart the instructions say:
—-snip—-
Next, we will configure a JSON store “proxy” for the chart panel. The data for this store will be loaded dynamically at runtime, as each car record is selected.

  Select the Data Stores tab and add JSON Store from the Data Stores toolbar.
  Set the userClassName and storeId attthe store.
—-snip—-

The second (last) bullet doesn’t explain what to set the chart store userClassName and storeId to. I looked it up in the completed files and it should read:
“Set the userClassName and storeId attributes to name the store “CarChartJson”.

Thanks,

Seth

Devshi Pindoria Sencha Employee

3 years ago

@Seth - Thank you for pointing out the “typo”. I have now corrected the article.

Carl Anderson

3 years ago

From the tutorial:
“Double-click each column heading in the grid to set them to “Manufacturer”, “Model” and “Price”. This is the same as setting the header attribute through the inspector.”

I don’t see a “header” value in the Component Config (aka “inspector”?).  When selecting each column the new header values are reflected in the Component Config “text” value.

 

Carl Anderson

3 years ago

Regarding my previous post.  It appears that the Designer “default” grid uses four columns with default xtypes of string, numeric date, and boolean which are associated with data fields “string”,“number”, “date”, and “bool” .  In addition to changing the column names, the column types must be changed and the “dataIndex” values must also be changed to match the corresponding data field.  The only way I was able to change the column xtype value was to right click on the MyGridPanel Component and use the “Auto columns” option (after loading the JSON data store) which replaced the default columns with six appropriately typed/mapped columns for my specified data store.  I then deleted the fields wiki, img, and quality.  The grid columns xtype value did not appear to be available/editable in the Component Config.

Carl Anderson

3 years ago

I realize this article is a Designer tutorial but a little explanation of the Ext JS event handling “magic” would be helpful.
This code was added to the file carstore/app/view/CarListings.js:

Ext.define(‘CarStore.view.CarListings’, {
extend: ‘CarStore.view.ui.CarListings’,
....
onGridRowSelect: function(grid, row) {
  this.down(’#detail’).update(row.data);
  this.down(’#chart’).store.loadData(row.data.quality);
}
....
}

So CarStore.view.CarListings extends CarStore.view.ui.CarListings which extends Ext.panel.Panel

I can’t find onGridRowSelect in the API documentation.  Where is this configuration item documented?

Thanks

Carl Anderson

3 years ago

The “Configure Stores” section of the tutorial omits the creation the “name” and “rating” fields for the CarChartStore.

Seth

3 years ago

@Devshi - In the tutorial it states:

—-snip—-
Now let’s configure object references for each component. Set the id for the Grid Panel to “grid”. Set the id for the (middle) subpanel to “detail”. Set the id for the (bottom) subpanel to “chart”.
—-snip—-

However, I found that the chart itself, not the parent container/panel, should have the id of “chart”. Otherwise, the event handling using “this.down(’#chart’)...” returns the panel so “.store.loadData()” is not a valid function call as the store isn’t bound to the panel.

Devshi Pindoria Sencha Employee

3 years ago

@Carl @Seth - thank you for your comments/correction. I have updated the article making appropriate updates.

Leave a comment:

Commenting is not available in this channel entry.