sencha architect 2 官方实例 第一个实例

汽车列表实例是一个说明数据绑定的好例子。应用可以 让用户选择列表中的一辆车来查看细节，包括一张汽车的照片，教程结束后，你应该理解如何创建和设置视图，创建model数据层，如何把数据绑定到视图中。

准备步骤

在开始课程前，请先做一下几步：

1 准备好architect软件 设置服务器 把项目部署到服务器上以便生成后查看（译者注：装个apache或nodejs即可，随便一个服务器，把生成的项目部署到public文件夹下 很简单 不赘述）

2 起码了解些extjs组件 后面课程要用到

3 下载本项目源码（地址为git ：点这里）（多说一句 压缩包里面的.sda文件是architect的原文件，而文件夹中的是生成文件，把文件夹整个拷贝到服务器可以看效果）

设置初始页面

1 在工具箱中搜索 panel 通过拖放Panel组件到画布的中心来增加一个Panel组件

2 Initial View的概念： 创建Panel后，在右边的inspector树中将列出这个panel，名字叫MyPanel，它的右边会有一个“Initial View 检测器”出现；鼠标放上去，architect将显示一条“这个组件是你的Initial View”，这意味着在程序开始运行时，这个Panel将第一个呈现出来。一个项目只能有一个Initial View。

3 保存项目，选择保存路径 如：/Users//Sites/, C:\Inetpub\wwwroot\, C:\wamp\www\ or /var/www/. 取名为CarListings.

就是这样~

点击 预览 按钮 出现对话框 填写服务器地址 如：http://localhost/CarListings/ 这取决于你的项目放在哪儿了和你的服务器环境

装载data到一个表格

增加并设置表格视图

1 在Panel的title上双击，更改它为 Car Listing.

2 在属性面板（Config panel）中点选属性 frame为true

3 选择Panel 出现一个在右上方的小齿轮样子的浮动按钮，设置布局为 vbox，这样panel里面的子组件将竖直摆放

4 拖一个 Grid Panel 到 我们的Panel容器中

5 选择 grid 在属性面板中找到 title 属性设置项 叉叉掉它，这样就去掉了grid的 title bar

6 更改最顶层的Panel的 userClassName 属性，由原先的MyPanel改为CarListings，这将改变它在inspector面板的名字，也将改变它在Ext.define中生成的js类的名字。

如果你安装以上步骤做的 你应该得到像这样的一个东东：

注意：我们用了vbox布局因为我们计划用竖直的方式来放更多的panels，以上的这个单独例子不设置vbox，仅仅通过设置frame为true就能达到同样效果，特别注意除非必要 否则不要嵌套容器，嵌套多层在大型项目中很有可能会有性能问题出现。

Models与Stores

如果你现在预览，你会发现grid是空的，有四个column headers --String, Number, Date, and Boolean.这是因为我们没有把我们的grid与一个data Store绑定起来。让我们来为grid绑定一个新的Store，装载一些运动型汽车的资料吧。

上面提供的压缩包文件 请大家解压缩 文件夹结构如下图：

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

其中 cars.json就是我们想要的数据啦，现在列举其中一个实体对象 如 保时捷 911，我们将创建一个Model来代表这个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
    }]
}

注意如果你用的IIS服务器，手动设置  JSON MIME 类型，这样能够传输json文件（译者注：谁会用iis呢？哈哈 当然不排除.net程序员。。。）

创建Model

让我们来为我们想要的汽车实例创建一个合适的键

1 在Inspector右上方 点击（“+”）号，然后选择Model。一个名字为MyModel的新Model将被创建在Models节点位置

2 选择这个新的被创建的Model 设置它的 userClassName 属性为 CarData

3 增加字段：manufacturer, model, price, wiki, img and quality。在属性面板中查询 fields属性，点击（“+”）号，在里面填写字段 以逗号分割，点击Finish或回车

如果你安装以上步骤做的 你应该得到像这样的一个东东：

创建Store

现在我们有了Model来代表数据结构，现在我们来创建一个Store来用the CarData Model

1 还是点击inspector的（“+”）号 选择Store下的子菜单，选择Json Store。一个名为“MyJsonStore”将被创建，位于Stores节点之下，注意：一个JsonStore自动增加一个JsonReader并假定我们用json格式装载数据。其他格式如XML或数组也同样支持。

2 在新创建的Store中出现一个警告图标，暗示Stores设置有个问题，点击图标察看问题所在

3 选择inspector中的Store 设置Model属性为CarData，警告消失

4 设置其userClassName为CarDataStore，在inspector中Store的名字将同步更改

5 选择CarDataStore下面的AjaxProxy，设置它的URL为 data/cars.json，注意这个URL为相对路径

6 右键CarDataStore 选择Load Data，装载数据后你将看到一只眼睛 就像这样

注意：当设置了代理的url配置或Store的数据配置，Load Data菜单项才可用

7 鼠标放在眼睛上能显示一些信息，现在只有一条记录被加载

8 点击眼睛可以看到回传数据，一个data数组将实体数据分开，这也是为什么只有一条记录被装载的原因，选择JsonReader 设置它的root属性为data，Store设置完毕

9 右键CarDataStore再次选择Load Data，因为我们更改了影响数据装载的stores属性，architect已经清除了数据缓存

10 最后 Store中 设置 autoLoad 属性为 true，这样我们不用编程加载它了

为Store绑定grid

下一步  grid是被绑定到Store的，任何时候Store中数据变了 那么grid自动改变其映射的值。任何Store中的记录添加或删除了，也会反映在grid中。

1 在inspector中选择Grid Panel，设置它的 store 属性为 CarDataStore，注意到所有的数据都消失了 那是因为我们的映射还没有建立。

2 在inspector中右键Grid Panel 选择 Auto Columns ，它将自动的将表格列与Model或Store的字段一对一匹配

 

如果你安装以上步骤做的 你应该得到像这样的一个东东：

保存 编译 预览，看看效果吧

一个detail panel（细节面板）和grid的关联

下一步，我们做一个细节面板显示grid的每条记录的额外信息 当用户点击单条记录时 将显示细节在这里

添加细节面板

1 选择最外层的CarListing面板，通过拖动右下角让它变大 留出细节面板的位置

2 还是在CarListing面板选择下，在工具箱中寻找到 panel，双击 Panel 增加一个新Panel 同时inspector中也选中了它们， 这是一个快速便捷的方式来添加组件 不用托拽了

3 选择新增加的Panel,在属性栏中搜索 tpl ，然后点击 Add 按钮（“+”）。所有的组件都有tpl属性，可以接受XTemplate。

一旦tpl属性被添加，点击向前箭头 打开代码编辑器 粘贴如下代码

  src="data/{img}" style="float: right" />
  Manufacturer: {manufacturer}

  Model:  href="{wiki}" target="_blank">{model}

  Price: {price:usMoney}

像这样

注意 当容器的布局为vbox或hbox时，他们的新添加子组件自动设置他们的flex为1，但如果你在设置布局之前添加子组件 你需要手动设置每个子组件的flex为1

更新细节面板

让我们来为这两个面板增加事件绑定，当一个用户点击表格中某一行，我们希望实例细节以Xtemplate的方式体现在下面的细节模板中

1 选择细节模板，设置属性 itemId -> detailPanel，这是为了在CarListings类中轻松检索出这个模板

2 在inspector中选择grid 面板，寻找 Event Binding选项，点击在右边的加号，选择 select事件 点击 finish或回车

3 architect自动生成了方法，如果你想更改，用 fn 选项

3 双击inspector中的事件绑定 可以显示出代码编辑器，注意我们只需要写方法体。Function参数已经为我们定义好了

5 粘贴如下代码到事件体中

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

注意 this 代表的是最外层panel

注意 在一些极其稀少的情况下，this不是最外层类，如 当为工程中的容器添加一个组件，组件增加一个initialize或painted事件，this指向的是Sencha Touch框架

特别注意 我们用itemId而没有用id属性。itemId属性必须是某一容器中独一无二的，但是不针对整个全局空间。id属性必须是全局唯一的，如果你用了id，那么在任何时间你只能有一个此组件的可见实例。architect鼓励代码重用，多个组件实例同时应用请参考 Linked Instances。

增加一个图表

图表数据建模

1 通过inspector建立第二个Model。设置属性 userClassName ->CarChart

2 查看quality字段的内容 如下所示。我们已经从cars.json中装在quality字段到CarStore了现在我们为图表创建一个额外的Model

"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
  }]

在配置面板中 增加两个字段到CarChart Model name和rating，这都是quality字段里的键，这些字段将直接映射到cars.json

4 创建一个Store，设置属性 userClassName -> CarChartStore。不选择子菜单 直接点选Store，创建一个没有代理和reader的空白Store。

5 设置Store属性 model -> CarChart Model 建立CarChartStore与CarChart的关联

增加图表

1 如果你感觉没有地方了 拖拽CarListings面板使面积增大

2 再拽一个panel到CarListings面板，拽到目标面板的title上或inspector的views节点上都行，也可以双击工具箱上图标

3 拽一个Column Chart到第三个面板（你刚刚增加的这个）

4 在inspector上选择上新创建的这个panel，点击齿轮图标，设置布局为 fit。这是让图表在两个方向上伸展以适应父容器

5 叉叉掉panel的title属性

6 增加中间和底部panel的margin。选择中间面板 detailPanel 设置属性：margins -> 5000，注意是Ext.layout.VBoxLayout的margin而不是Ext.Abstract.Component的margin，底部panel也同样方法设置。

7 在Canvas中 点击齿轮 选择CarChartStore用JSON Store绑定Chart组件，

注意 这样设置后图表会消失，这是正常的，我们只关心用户点击数据后它的展现情况

8 选择inspector总的图表下面的Category Axis 编辑图表的x轴 这个轴展现汽车质量的分类，做以下修改：

title -> Quality

fields -> 从x到name name字段为x轴提供数值

9 同样的 Numeric Axis是y轴 体现每辆车的质量分数，做一下修改

title -> Score

fields ->从y到rating

maximum -> 5

minimum ->0

majorTickSteps -> 4

10 选择MyColumnSeries，在属性面板中 label ->

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

注意 我们必须把text-anchor括起来因为它中间有“-”

11 在MyColumnSeries中再更改属性

xField -> name

yField -> rating

12 更改chart的属性 itemId -> qualityChart

13 增加事件 onGridPanelSelect 这样用户选择时就会更新图表Store

// 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 children
  var chart = this.down('#qualityChart');
  // get the quality field out of this record
  var qualityData = record.get('quality');
  chart.store.loadData(qualityData);

好了 课程完毕了~ 

整体效果如图