Sencha-组件-DataView(数据视图)（官网文档翻译16）

DataView中很容易地创建动态大量的组件，通常是根据掀起了商店。这是伟大的渲染从您的服务器的后端或任何其他数据源的数据是权力成分像Ext.List。

使用DataView的，只要你想秀台多次相同的组件，这样在应用程序的例子：

消息列表中的电子邮件应用程序

显示最新消息/鸣叫

瓷砖的专辑在HTML5音乐播放器

创建一个简单的DataView

简单地说，一个DataView的仅仅是一个存储的数据，我们用一个简单的模板来呈现每个项目：

var touchTeam =Ext.create('Ext.DataView',{
fullscreen:true,

store:{
fields:['name','age'],
data:[{name:'Jamie Avins',  age:100},{name:'Rob Dougan',   age:21},{name:'Tommy Maintz', age:24},{name:'Jacky Nguyen', age:24},{name:'Ed Spencer',   age:26}]},

itemTpl:'{name} is {age} years old'});

在这里，我们只是一切内嵌定义，所以它的所有本地没有从服务器加载。对于每一个在我们的商店中定义的5个数据项，数据视图将呈现一个组件，并传递的姓名和年龄数据。该组件将使用我们提供的第三方物流，使我们提供的花括号占位符中的数据。

因为DataView中集成了存储的任何更改会立即反映在屏幕上的商店。例如，如果我们添加一个新的记录的存储，它会呈现在我们的DataView：

touchTeam.getStore().add({
name:'Abe Elias',
age:33});

我们没有手动更新数据视图，它只是自动更新。同样的情况，如果我们修改一个现有的记录在存储：

touchTeam.getStore().getAt(0).set('age',42);

这将让商店（杰米）的第一条记录，更改至42岁，并自动更新在屏幕上的。

从服务器加载数据

我们经常要加载数据从我们的服务器或其他一些Web服务，这样我们就不必硬编码的所有本地。比方说，我们要加载所有最新的鸣叫约煎茶触摸到一个DataView中，并为每一个提供用户的个人资料图片，用户名和鸣叫消息。要做到这一点，我们要做的是修改的 存储和itemTpl一点：

Ext.create('Ext.DataView',{
fullscreen:true,

store:{
autoLoad:true,
fields:['from_user','text','profile_image_url'],

proxy:{
type:'jsonp',
url:'http://search.twitter.com/search.json?q=Sencha Touch',

reader:{
type:'json',
rootProperty:'results'}}},

itemTpl:'<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>'});

DataView中不再有硬编码的数据，而不是我们提供了一个代理，为我们获取数据。在这种情况下，我们使用了JSON-P代理，这样我们就可以加载来自Twitter的搜索API的JSON-P。我们还指定了每个推的领域，商店的自动加载配置和使用自动加载。最后，我们配置了一个读卡器解码Twitter的响应，告诉它期望JSON的Twitter信息中可以找到的“结果”部分的JSON响应。

我们做的最后一件事是更新我们的模板呈现图像，Twitter用户名和消息。现在我们需要做的就是添加一个小的CSS样式列表的方式，我们希望它...

一个DataView样式

现在你可能已经意识到，尽管我们的数据视图显示数据，从我们的商店，它不具有任何默认的样式。这是由设计，但添加自定义CSS是很简单的。，DataView中有两个配置，这样就可以针对您的自定义CSS到您的视图：baseCls和itemCls。，baseCls是用来添加一个

类名

左右的DataView的外部元素的。您提供的itemCls被添加到每个项目呈现到我们的DataView。

如果不指定一个itemCls，则它会自动拍摄baseCls配置（默认为

X-数据视图

）和前置

项

。因此，每个项目将有一个类名

X-数据视图项

。

但我们添加该配置前，我们需要创建我们的自定义CSS。以下是一个简单的例子：

.my-dataview-item {
background:#ddd;
padding:1em;
border-bottom:1px solid #ccc;}.my-dataview-item img {float: left;
margin-right:1em;}.my-dataview-item h2 {
font-weight: bold;}

一旦我们有了，完整的，我们可以回到我们以前的Twitter的例子，添加baseCls配置：

Ext.create('Ext.DataView',{
fullscreen:true,

store:{
autoLoad:true,
fields:['from_user','text','profile_image_url'],

proxy:{
type:'jsonp',
url:'http://search.twitter.com/search.json?q=Sencha Touch',

reader:{
type:'json',
root:'results'}}},

itemTpl:'<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>',

baseCls:'my-dataview'//As described above, we don't need to set itemCls in most cases as it will already add a className//generated from the baseCls to each item.//itemCls: 'my-dataview-item'});

组件的DataView

以上我们创建的DataView与itemTpl，这意味着每个项目从模板中呈现。然而，有时你需要每个项目的一个组成部分，因此您可以为您的用户提供了丰富的UI。煎茶触摸2，我们介绍了useComponents，配置，让您做到这一点。

创建组件的DataView创建一个正常的基于模板的DataView像上面是非常相似的，但是你必须定义，项目视图呈现时使用您的列表中的每个项目。

Ext.define('MyListItem',{
extend:'Ext.dataview.component.DataItem',
requires:['Ext.Button'],
xtype:'mylistitem',

config:{
nameButton:true,

dataMap:{
getNameButton:{
setText:'name'}}},

applyNameButton:function(config){returnExt.factory(config,Ext.Button,this.getNameButton());},

updateNameButton:function(newNameButton, oldNameButton){if(oldNameButton){this.remove(oldNameButton);}if(newNameButton){this.add(newNameButton);}}});

以上是如何定义的基于组件的DataView的项目组成部分的一个例子。有几个重要的注意事项：

我们必须延长Ext.dataview.component.DataItem的每个项目。这是一个抽象类，它处理的每个项目的记录处理。

下面的扩展，我们需要Ext.Button。这仅仅是因为我们要在我们的项目组件插入一个按钮。

然后，我们指定

的xtype

这个项目的组成部分。

在我们的配置块我们定义

nameButton，

。这是一个自定义的配置，我们添加这个组件将被改造成一个按钮类系统。默认情况下，我们将它设置到

真正的

，但是这也可能是一个配置块。此配置会自动生成getter和setter方法我们

nameButton

。

接下来，我们定义的数据地图。数据地图是地图之间的数据记录，这个观点。该

getNameButton

是要更新的情况下，你的getter，所以在这种情况下，我们想要得到的

nameButton

配置该组件的。然后，该块内，我们给它的setter，例如，在这种情况下，是

的setText

和领域的记录，我们传递给它。因此，一旦这个项目的组件获得创纪录的

nameButton

，然后调用

的setText

的

名义

值的记录。

然后，我们定义的apply方法为我们的

nameButton

。apply方法使用Ext.factory Ext.Button的一个实例传递到转换的配置。该实例，然后返回，这样会导致被称为

updateNameButton

。简单的

updateNameButton

方法删除旧的nameButton，例如，如果它存在，并添加新的的nameButton举例来说，如果它的存在。

现在，我们已经创建了该项目的组成部分，我们可以创建组件的DataView，我们如何做之前类似。

Ext.create('Ext.DataView',{
fullscreen:true,

store:{
fields:['name','age'],
data:[{name:'Jamie Avins',  age:100},{name:'Rob Dougan',   age:21},{name:'Tommy Maintz', age:24},{name:'Jacky Nguyen', age:24},{name:'Ed Spencer',   age:26}]},

useComponents:true,
defaultType:'mylistitem'});

有两个重要的补充。首先，我们添加useComponents配置，将其设置为

真

。其次，我们设置了DefaultType的配置，以我们的的项目组成部分

mylistitem的

。这告诉我们定义的项目每个项目的视图组件使用的DataView。

现在，如果我们运行这个代码放在一起，我们可以看到该组件的DataView的行动。

Ext.create('Ext.DataView',{
fullscreen:true,

store:{
fields:['name','age'],
data:[{name:'Jamie Avins',  age:100},{name:'Rob Dougan',   age:21},{name:'Tommy Maintz', age:24},{name:'Jacky Nguyen', age:24},{name:'Ed Spencer',   age:26}]},

useComponents:true,
defaultType:'mylistitem'});

关于这个伟大的事情就是它的灵活性，它可以增加你的数据视图。每个项目组件都有其自己的记录，所以你可以做任何事的。

下面我们添加一个事件监听器，水龙头事件我们

nameButton

，这将提醒用户选定的人随着年龄的。

Ext.define('MyListItem',{//...

updateNameButton:function(newNameButton, oldNameButton){if(oldNameButton){this.remove(oldNameButton);}if(newNameButton){// add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method// when it happens
newNameButton.on('tap',this.onNameButtonTap,this);this.add(newNameButton);}},

onNameButtonTap:function(button, e){var record =this.getRecord();Ext.Msg.alert(
record.get('name'),// the title of the alert"The age of this person is: "+ record.get('age')// the message of the alert);}});

当我们将此代码添加到我们上面的例子中，我们得到了最终的结果：