汽车列表实例是一个说明数据绑定的好例子。应用可以 让用户选择列表中的一辆车来查看细节，包括一张汽车的照片，教程结束后，你应该理解如何创建和设置视图，创建model数据层，如何把数据绑定到视图中。 准备步骤 在开始课程前，请先做一下几步： 1 准备好ar
汽车列表实例是一个说明数据绑定的好例子。应用可以 让用户选择列表中的一辆车来查看细节，包括一张汽车的照片，教程结束后，你应该理解如何创建和设置视图，创建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 byvar 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.json4 创建一个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 childrenvar chart =this.down('#qualitychart');// get the quality field out of this recordvar qualitydata = record.get('quality'); chart.store.loaddata(qualitydata);
好了 课程完毕了~ 整体效果如图