第8章 DataView组件_8.1DataView组件的基本功能

最新推荐文章于 2024-08-10 08:24:04 发布

tuohuangs

最新推荐文章于 2024-08-10 08:24:04 发布

阅读量2.5k

点赞数

分类专栏： Sencha Touch权威指南（初学实践）文章标签： sencha touch datavie

本文链接：https://blog.csdn.net/lzlchangqi/article/details/11827215

版权

Sencha Touch权威指南（初学实践）专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ST2.0中的DatView组件功能非常强，能够使用XTemplate模板来显示组件中的内容，同时与数据仓库进行绑定，当数据仓库的内容发生任何变化时，模板中的内容也会立即更新与显示出来。该组件中可以显示列表、图像等其他组件或元素，当对书库仓库进行频繁更新时，使用DataView组件会变得非常方便。DataView组件的另一个优势是，因为使用Xtemplate模板直接生成HTML代码片段，在HTML代码中可以自由指定HTML元素与样式，轻松地通过XTemplate模板指定页面中某个局部区域的渲染方式。使用Ext.dataview.DataView类定义DataView组件，类的别名为Ext.DataView，xtype值为dataview。

代码清单8-1

Ext.Loader.setConfig({ 
	enabled: true 
});

Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
Ext.application({
    name: 'MyApp',
    icon: 'resources/images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'resources/images/phone_startup.png',
    tabletStartupScreen: 'resources/images/tablet_startup.png',
    launch: function() {   
        var calcData = function() {
            var data = [];
            var item = {};
            for (var i =0; i < 30; i++) {
                var r = Math.floor(Math.random() * 255);
                var g = Math.floor(Math.random() * 255);
                var b = Math.floor(Math.random() * 255);
                item = {
                    id:i,
                    //format返回格式化后的字符串
                    rgb:Ext.util.Format.format('rgb({0},{1},{2})', r, g, b)
                };
                data[i] = item;
            }
            return data;
        };
       //1、初始化数据
        var initData = calcData();
        //2、定义数据仓库store
        var store=Ext.create('Ext.data.Store', {
            data:initData,
            fields:['id','rgb']
        });
        //3、使用dataViewTpl变量创建一个XTemplate模板，指定需要显示的元素与样式
        var dataViewTpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="paul">',
            '<div>',
            '<div style="background:{rgb};width:100%;height:15px;color:#EEE; font-size:small;">',
            '<div>',
            '</div>',
            '</div>',
            '</tpl>'
        );
        //4、定义工具条按钮
        var myToolbar = Ext.create('Ext.Toolbar', {
            docked : 'top',
            items: [
            {
                text:'改变颜色',
                handler:function(){
                    var newData  = calcData();
                    store.setData(newData);
                }
            }]
        });

        var myPanel = Ext.create('Ext.Panel', {
            id:'myPanel',
            items: [
                myToolbar,//4
                {
                    xtype:'dataview',
                    itemTpl:dataViewTpl, //3
                    store: store,//2
                    height:350
                }
            ]
        });
        Ext.Viewport.add(myPanel);
    }
});

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />        		
        <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css" />
        <title>DataViewTest</title>
    </head>
    <body>    
    	<!--<script type="text/javascript" src="lib/cordova.js"></script>-->
        <script type="text/javascript" src="lib/sencha-touch-all.js"></script>        
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

运行效果

8.1.2 对DataView组件使用样式

在ST2.0中，有两个配置选项可以被用来对DataView组件使用样式，分别是baseCls配置选项与itemCls配置选项。其中baseCls被用于对整个DataView组件添加一个样式类，而itemCls被用于对DataView组件中的每一个子项（例如在清单8-1中，每一个颜色条称为一个子项）添加一个样式类。

代码清单8-2

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />        		
        <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css" />
        
        <title>DataView</title>
        
    </head>
    
    <body>    
    	<!--<script type="text/javascript" src="lib/cordova.js"></script>-->
        <script type="text/javascript" src="lib/sencha-touch-all.js"></script>        
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

html中添加baseCls：

<style type="text/css">
    	.book-item{
        	color:blue;
        	font-weight:bold;
        	background-color:pink;
    	}
    	.book-item img{
        	width:50px;
    	}
</style>

app.js如下：

Ext.Loader.setConfig({ 
	enabled: true 
});

Ext.require(['Ext.data.Store','Ext.dataview.DataView']);
Ext.application({
    name: 'MyApp',
    icon: 'resources/images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'resources/images/phone_startup.png',
    tabletStartupScreen: 'resources/images/tablet_startup.png',
    launch: function() {   
    	var store=Ext.create('Ext.data.Store',{
    		fields: ['name','url'],
    		data: [
    		    {name:'HTML 5与CSS 3权威指南',url:'resources/images/html51.jpg'},
                {name:'HTML5揭秘',url:'resources/images/html52.jpg'},
                {name:'HTML5游戏开发',url:'resources/images/html53.jpg'},
                {name:'HTML5高级程序设计',url:'resources/images/html54.jpg'},
                {name:'HTML 5&CSS完全手册（第5版）',url:'resources/images/html55.jpg'}
    		]
        });//store
    	
    	var tpl = new Ext.XTemplate(
    		'<tpl for=".">',                
            '<div style="font-size:12px;">',
            '<img src="{url}" title="{name}"><br/>',
            '{name}',
            '</div>',
            '</tpl>'    
        );
     
        var dataview = Ext.create('Ext.DataView', {
             fullscreen:true,
             scrollable:'vertical',
             store: store,
             itemTpl:tpl,
             //baseCls:'book'
         });
        Ext.Viewport.add(dataview);
    }
});

比较添加前后效果：

添加前

添加后

8.1.3 将DataView组件中的数据进行排序

var store=Ext.create('Ext.data.Store',{     
            fields: [
                'name', 'url'
            ],
            data:[
                {name:'HTML 5与CSS 3权威指南',url:'images/html51.jpg'},
                {name:'HTML 5揭秘',url:'images/html52.jpg'},
                {name:'HTML 5游戏开发',url:'images/html53.jpg'},
                {name:'HTML 5高级程序设计',url:'images/html54.jpg'},
                {name:'HTML 5与CSS完全手册（第5版）',url:'images/html55.jpg'}
            ],

	   //另一种方法 sorters:'name'
            sorters:{ 
                    property:'name', 
                    direction:'asc',
                    transform:function(value){return getSpell(value,value);}
            }    
        });

transform配置选项为一个函数，用于在排序前首先将排序时所用到的字段值（也即选项值中所指定函数的参数value的值）进行某种格式的转换，在转换后再将转换后的值进行比较。

8.1.4 DataView组件的选取方式

ST2.0中，用户单击DataView组件中某个子项可以对该子项进行选取，通过DataView组件的model配置选项来指定DataView组件的选取方式。该配置选项的选项值如下：

multi:允许用户同时按住Shift键或Ctrl键，对多个子项进行同时选取

single:每次值允许用户选择一个子项。

simple:允许用户通过单击的方式同时选取多个子项，不需要用户同时按住Shift键或Ctrl键。默认选项值为single。

将disableSelection配置选项的选项值设定为true,可以禁止用户对DataView组件中的任何子项进行选取。

通过selectedCls配置选项来设置被选取子项的样式类。