Ext JS4学习教程+笔记（六）DataView面板

Ext JS的DataView控件面板，

可以将一个列表中的数据以统一格式输出在页面上，其类名是Ext.view.View。

测试代码如下：
function viewTest(){
var store
= Ext.create('Ext.data.Store' ,{
fields: ['name', 'thumb' ],
proxy:{
type: 'ajax',
url: 'icons.json',
reader:{
type: 'json',
root: ''
}
}
});
store.load( function(){
Ext.create( 'Ext.view.View',{
renderTo:Ext.getBody(),
width:900,
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap">' ,
'<img src="icons/{thumb}"
/><br/>' ,
'<span>{name}</span>',
'</div>',
//'<tpl if="xindex
% 4 == 0"><br /></tpl>',
'</tpl>'
],
store:store,
itemSelector: 'div.thumb-wrap',

listeners:{
itemdblclick: function(){
Ext.Msg.alert( 'helo','db
clicked' );
}
}
});
});
}
说明：
1，Ext.view.View有3个属性比较重要，一个是store属性，要显示的列表，可以用ajax从外部读入；
icons.json的内容如下：
[

{

name: 'Kitchen Sink',

thumb: 'sink.png',

url: 'kitchensink',

type: 'Application'

},

{

name: 'Twitter app',

thumb: 'twitter.png',

url: 'twitter',

type: 'Application'

}
]
（这里只列出两条，用到了name和thumb两个属性）
另一个是tpl属性，其语法参考Ext.XTemplate的文档，简单说来就是可以用{}符号引用json中的属性；
第三个是itemSelector，这是和tpl配合使用的，表示选中元素的方法。
2，在css中thumb-wrap的设置如下，
.thumb-wrap{
float: left;
margin: 4px ;
margin-right: 0;
padding: 5px ;
}
这样调整面板宽度，就可以实际在一行上显示更多项目。