First official senchaw.t2 instance

A car list instance is a good example of data binding. The app allows users to select a car in the list to view details, including a photo of a car. After the tutorial, you should understand how to create and set a view and create a model data layer, how to bind data to a view. Before starting the course, take the following steps: 1. Prepare the ar

A car list instance is a good example of data binding. The app allows users to select a car in the list to view details, including a photo of a car. After the tutorial, you should understand how to create and set a view and create a model data layer, how to bind data to a view. Before starting the course, take the following steps: 1. Prepare the ar

A car list instance is a good example of data binding. The app allows users to select a car in the list to view details, including a photo of a car. After the tutorial, you should understand how to create and set a view and create a model data layer, how to bind data to a view.

Procedure

Before starting the course, take the following steps:

1. Prepare the effecect software and set up the server to deploy the project to the server for later generation and viewing, deploying the generated project to the public folder is simple)

2. Learn more about extjs components and use them in subsequent courses.

3. Download the source code of this project (Address: git: Click Here) (to add more information in the compressed package. the sda file is the original file of effecect, while the file in the folder is generated. You can copy the entire folder to the server to see the effect)

Set initial Page

1. Search for a panel in the toolbox. Drag and Drop the Panel component to the center of the canvas to add a Panel component.

2 Initial View concept: After a Panel is created, the panel will be listed in the inspector tree on the right, named MyPanel. An "Initial View detector" will appear on the right of the Panel; move the mouse up, effecect will display a message "This component is your Initial View", which means that the Panel will be first displayed when the program starts running. A project can have only one Initial View.

3. Save the project and select the Save path, for example,/Users/ /Sites/, C: \ Inetpub \ wwwroot \, C: \ wamp \ www \ or/var/www/. Name it CarListings.

That's it ~

Click the preview button. In the displayed dialog box, enter the server address, for example, http: // localhost/CarListings/. This depends on where your project is located and your server environment.

Load data to a table

Add and set table views

1. Double-click the title of the Panel and change it to Car Listing.

2. on the property panel (Config panel), select the attribute frame as true.

3. Select a floating button in the upper right corner of the Panel and set the layout to vbox, so that the sub-components in the panel are placed vertically.

4. Drag a Grid Panel to our Panel container.

5. Select grid. In the attribute panel, locate the title attribute setting item and remove the title bar of the grid.

6. Change the userClassName attribute of the top-level Panel from MyPanel to CarListings. This will change its name on the inspector Panel and Ext. the name of the js class generated in define.

If you install the above steps, you should get something like this:

Note: We use the vbox layout because we plan to put more panels in vertical mode. In the preceding example, we do not set vbox, you can achieve the same effect only by setting frame to true. Note that you do not need to nest containers unless necessary. nested layers may have performance problems in large projects.

Models and Stores

If You Preview now, you will find that the grid is empty and has four columns headers -- String, Number, Date, and Boolean. this is because we didn't bind our grid to a data Store. Let's bind a new Store for grid and load materials for sports cars.

For the compressed package files provided above, extract the folder structure as follows:

CarListings/|____app/||____view/|||____CarListings.js|||____Viewport.js|____app.html|____app.js|____data/||____2004_Porsche_911_Carrera_type_997.jpg||____250px-2007_Audi_TT_Coupe.jpg||____250px-Audi_S5.jpg||____250px-BMW_M3_E92.jpg||____250px-Nissan_GT-R.jpg||____cars.json|____metadata/||____Application||____resource/|||____Library||____view/|||____CarListings|CarListings.xds

Here, cars. json is the data we want. Now we list one of the Entity objects, such as Porsche 911. We will create a Model to represent this data.

{"img":"2004_Porsche_911_Carrera_type_997.jpg","manufacturer":"Porsche","model":"911","price":135000,"wiki":"http://en.wikipedia.org/wiki/Porsche_997","quality":[{"name":"overall","rating":1},{"name":"mechanical","rating":4},{"name":"powertrain","rating":2},{"name":"body","rating":4},{"name":"interior","rating":3},{"name":"accessories","rating":2}]}

Note: If you use the IIS server, manually set the json mime type to transfer json files? Haha of course. net programmers are not excluded ...)

Create Model

Let's create a proper key for the desired car instance

1. Click ("+") in the upper-right corner of Inspector and select Model. A new Model named MyModel will be created at the Models node location.

2. Select the newly created Model and set its userClassName attribute to CarData.

3. Add fields: manufacturer, model, price, wiki, img and quality. Query the fields attribute in the attribute panel, click the ("+") number, enter the fields in it and separate them with commas (,), click Finish or press Enter.

If you install the above steps, you should get something like this:

Create Store

Now we have a Model to represent the data structure. Now we create a Store to use the CarData Model

1. Click "+" in "inspector" and select the sub-menu under "Store" and select "Json Store. A "MyJsonStore" name will be created under the Stores node. Note: A JsonStore automatically adds a JsonReader and assumes that we load data in json format. Other formats, such as XML and arrays, are also supported.

2. A warning icon appears in the newly created Store, indicating that there is a problem with the Stores settings. Click the icon to view the problem.

3. Select Store in inspector to set the Model attribute to CarData. The warning disappears.

4. Set its userClassName to CarDataStore. In the inspector, the Store name will be changed synchronously.

5. Select AjaxProxy under CarDataStore and set its URL to data/cars. json. Note that this URL is a relative path.

6. Right-click CarDataStore and select Load Data. After loading the Data, you will see an eye like this.

Note: The Load Data menu item is available only when the proxy url configuration or Store Data configuration is set.

7. Put the mouse on your eyes to display some information. Now only one record is loaded.

8. You can see the returned data in the eyes. A data array separates the object data, which is why only one record is loaded. Choose JsonReader to set its root attribute to data, and the Store settings are complete.

9 right-click CarDataStore and select "Load Data" again. Because we have changed the stores attribute that affects Data loading, effecect has cleared the Data cache.

10. In the last Store, set the autoLoad attribute to true, so that we do not need to program to load it.

Bind a grid to the Store

The next step is to bind the grid to the Store. When the data in the Store changes, the grid automatically changes its ing value. Records added or deleted from any Store are also reflected in the grid.

1. Select Grid Panel in inspector and set its store attribute to CarDataStore. Note that all data disappears because our ing has not been established.

2. In inspector, right-click Grid Panel and select Auto Columns. It automatically matches the table column with the Model or Store field one to one.

If you install the above steps, you should get something like this:

Save the compilation preview and check the effect.

Association between a detail panel (detail panel) and a grid

Next, we will create a Detail Panel to display additional information for each record of the grid. The details will be displayed here when you click a single record.

Add Detail Panel

1. Select the CarListing panel on the outermost layer, and drag the lower right corner to make it larger to set the position of the Detail Panel.

2. Select the CarListing panel, find the Panel in the toolbox, double-click the Panel to add a new panel, and select them in the inspector. This is a quick and convenient way to add components without being required.

3. Select the newly added Panel, search for tpl in the attribute bar, and click "+ "). All components have the tpl attribute and can accept XTemplate.

Once the tpl attribute is added, click the forward arrow to open the code editor and paste the following code:

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

Like this

Note that when the container layout is vbox or hbox, their new child components will automatically set their flex to 1, however, if you add sub-components before setting the layout, You need to manually set the flex of each sub-component to 1.

Update Detail Panel

Let's add event binding for the two panels. When a user clicks a row in the table, we want the instance details to be reflected in the following detail template in Xtemplate mode.

1. Select the detail template and set the property itemId-> detailPanel to easily retrieve the template in the CarListings class.

2. select grid panel in inspector, find the Event Binding option, click the plus sign on the right, select Event and click finish or press Enter.

3. Select automatically generates a method. If you want to change the method, use the fn option.

3 double-click event binding in inspector to display the code editor. Note that you only need to write the method body. The Function parameter has been defined for us.

5. paste the following code into the event body.

// grab a reference to the detailPanel via itemId// the # in front of the id indicates that we would like to grab a reference byvar detailPanel =this.child('#detailPanel');// update the detailPanel with data// this will trigger the tpl to become updates detailPanel.update(record.data);

Note that this indicates the outermost panel.

Note that in rare cases, this is not the outermost class. For example, when a component is added to the container in the project, an initialize or painted event is added to the component. this points to the Sencha Touch framework.

Note that we use itemId instead of the id attribute. The itemId attribute must be unique in a container, but not for the entire global space. The id attribute must be globally unique. If you use an id, you can only have a visible instance of this component at any time. Terraect encourages code reuse. For details about how to use multiple component Instances simultaneously, see Linked Instances.

Add a chart, chart, and chart data modeling

1. Use inspector to create the second Model. Set the attributes userClassName-> CarChart

2. view the content of the quality field as follows. We have installed the quality field in cars. json to CarStore. Now we create an additional Model for the chart.

"quality":[{"name":"overall","rating":1},{"name":"mechanical","rating":4},{"name":"powertrain","rating":2},{"name":"body","rating":4},{"name":"interior","rating":3},{"name":"accessories","rating":2}]

Add two fields in the configuration panel to CarChart Model name and rating. These fields are keys in the quality field and will be directly mapped to cars. json.

4. Create a Store and set the attributes userClassName-> CarChartStore. Click Store directly without selecting sub-menu to create a blank Store without proxy or reader.

5. Set the Store Attribute model-> CarChart Model to establish the association between CarChartStore and CarChart.

Add chart

1. If you feel there is no place to drag the CarListings panel to increase the area

2. Drag a panel to the CarListings panel and drag it to the title of the target panel or the views node of the inspector. You can also double-click the Toolbox icon

3. Drag a Column Chart to the third Panel (the one you just added)

4. Select the newly created panel on inspector, click the gear icon, and set the layout to fit. This allows the chart to stretch in two directions to adapt to the parent container.

5. Remove the title attribute of the panel.

6. Add the margin of the middle and bottom panel. Select the middle panel detailPanel setting attribute: margins-> 5000. Note that the margin of Ext. layout. VBoxLayout is not the margin of Ext. Abstract. Component, and the bottom panel is set in the same way.

7. Click the gear icon in the Canvas and select CarChartStore to bind the Chart component to the JSON Store,

Note that the chart will disappear after this setting. This is normal. We only care about the display of the chart after the user clicks the data.

8. Select "Category Axis" under the overall inspector chart to edit the X Axis of the chart. This Axis shows the classification of vehicle quality. Make the following changes:

Title-> Quality

Fields-> the field from x to name provides a value for the x axis.

9 The same Numeric Axis is the Y Axis that reflects the quality score of each vehicle. Make some modifications.

Title-> Score

Fields-> from y to rating

Maximum-> 5

Minimum-> 0

MajorTickSteps-> 4

10. Select MyColumnSeries and choose label>

{      display:'insideEnd',      field:'rating',      color:'#333',`text-anchor`:'middle'}

Note that we must enclose text-anchor because it contains "-" in the middle.

11. Change the attributes in MyColumnSeries.

XField-> name

YField-> rating

12. Change the chart attribute itemId-> qualityChart

13. The onGridPanelSelect event is added so that the chart Store is updated when the user selects the event.

// grab a reference to the qualityChart, notice we use down here instead of child// because down will go down the container hierarchy at any depth and child// only retrieves direct childrenvar chart =this.down('#qualityChart');// get the quality field out of this recordvar qualityData = record.get('quality');  chart.store.loadData(qualityData);

The course is complete ~

Overall Effect