sencha Touch DataView组件---- DataView组件使用样式

 

 

//设置DataView组件的使用样式用itemCls和baseCls：itemsCls:对整个DataView组件添加一个样式类;baseCls:用于对DataView组件中每个子项添加一个样式类:注意:使用baseCls配置选项时,需要在样式类名中添加"-item"后缀

/*********************10  DataView组件  DataView组件使用样式**********************************/

//定义store数据仓库

var store=Ext.create('Ext.data.Store',{

fields:[

'name','url'

],

data:[//数据源

{name:'123',url:'resources/images/phone1.png'},

{name:'html5揭秘',url:'resources/images/phone1.png'},

{name:'html5游戏开发',url:'resources/images/phone1.png'}

 

]  

});

//定义数据显示的模板

var tpl=new Ext.XTemplate(

'<tpl for=".">',

'<div style="font-size:12px;">',

'<img src="{url}" title="{name}">',

'{name}',

'</div>',

'</tpl>'

);

//定义DataView

var dataview10=Ext.create('Ext.DataView',{

fullscreen:true,

scrollable:'vertical',

store:store,

itemTpl:tpl,

itemCls:'bookItem',//设置组件的使用样式用itemCls和baseCls,itemsCls:对整个DataView组件添加一个样式类;baseCls:用于对DataView组件中每个子项添加一个样式类:注意:使用baseCls配置选项时,需要在样式类名中添加"-item"后缀

baseCls:'book'

});

    Ext.Viewport.add(dataview10);