第8章 DataView组件_8.2DataView组件的常用事件

最新推荐文章于 2021-07-16 10:55:01 发布

思辨共悟

最新推荐文章于 2021-07-16 10:55:01 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 移动设备

本文链接：https://blog.youkuaiyun.com/lzlchangqi/article/details/11833115

本文详细介绍了Sencha Touch中DataView组件的各种事件及其用法，包括itemsingletap、itemdoubletap、itemtap、itemswipe、refresh、selectionchange等事件，并提供了具体的代码示例。

本章针对其中几个基本的时间做必要的介绍

8.2.1 itemsingletap事件、itemdoubletab事件与itemtap事件

用户单击DataView组件中的某项时，触发itemsingletap事件；双击DataView组件中的某项时，触发itemdoubletab事件；无论用户单击还是双击DataView组件中的某项时，都触发itemtab事件。

index.html使用—debug.js，工程中添加sdk/src

ssa

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />        		
        <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css" />
        <style type="text/css">
    	.book-item{
        	color:blue;
        	font-weight:bold;
        	background-color:pink;
    	}
    	.book-item img{
        	width:50px;
    	}
    	</style>
        <title>DataView</title>     
    </head>
    <body>    
    	<!--<script type="text/javascript" src="lib/cordova.js"></script>-->
        <script type="text/javascript" src="sencha-touch-debug.js"></script>        
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="chineseSort.js"></script>
    </body>
</html>

app.js为：

添加如下

//debug

Ext.Loader.setPath({
    'Ext': 'sdk/src'
});

var dataview = Ext.create('Ext.DataView', {
             fullscreen:true,
             scrollable:'vertical',
             store: store,
             itemTpl:tpl,
             baseCls:'book',
             listeners:{
            	 itemsingletap:function(dataview, index, item, record,e){
            		 console.log("您single了"+store.getAt(index).get('name'));
            	 },
            	 itemdoubletap:function(dataview, index, item, record,e){
            		 console.log("您double了"+store.getAt(index).get('name'));
            	 },
            	 itemtap:function(dataview, index, item, record,e){
            		 console.log("您选择了"+store.getAt(index).get('name'));
            	 },
            	 itemswipe:function(dataview, index, item, record,e){
            		 Ext.Msg.alert("您选择了"+store.getAt(index).get('name'));
            	 }
             }
         });

在事件处理函数中，事件都使用了以下5个可选参数。

dataview: 单击或双击或扫过的DataView组件的对象。

index:单击或双击或手指扫过列表项的序号（第一个列表项的序号为0）

item: 页面中该列表项所生成的元素

record:单击或双击或扫描的记录

e:触发事件的时间对象

8.2.2 itemswipe事件

itemswipe事件是一个特殊事件，只在平板电脑或移动设备中触发，当用户手指稍微用力扫过DataView组件中的某个子项时触发该事件。

8.2.3 refresh事件

在ST2.0中，允许对DataView组件的refresh事件监听并书写其事件处理函数。当DataView组件被渲染或有什么原因导致DataView事件被重新渲染（如其中的数据被修改）时触发该事件。


Ext.Loader.setPath({
'Ext': 'sdk/src'
});
Ext.require(['Ext.data.Store','Ext.dataview.DataView'])
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() { 
        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'}
            ]   
        });
        var toolbar=Ext.create('Ext.Toolbar',{
            docked:'top',  
            items:[
                {
                    text:'修改数据',
                    handler:function(){
                        var data=[
                            {name:'HTML 5游戏开发',url:'images/html53.jpg'},
                            {name:'HTML 5高级程序设计',url:'images/html54.jpg'},
                            {name:'HTML 5与CSS完全手册（第5版）',url:'images/html55.jpg'}
                        ];
                        store.setData(data);
                    }
                }
            ]
        });
        
        var tpl = new Ext.XTemplate(
            '<tpl for=".">',                
                '<div style="font-size:12px;">',
                '<img src="{url}" title="{name}"><br/>',
                '{name}',
                '</div>',
            '</tpl>'
        );
        var count=0;
        var dataview = Ext.create('Ext.DataView', {
            fullscreen:true,
            scrollable:'vertical',
            store: store,
            items:toolbar,
            itemTpl:tpl,
            listeners:{
                refresh:function(list){
                    if(count>0)
                        Ext.Msg.alert('数据被更新');
                    count+=1;
                }
            }
        });
        Ext.Viewport.add(dataview);
    }
});

单击“修改数据按钮”，浏览器中弹出提示信息框，文字为“数据被更新”，这段代码中，使用count变量是为了防止页面被打开时就弹出该信息提示框，与用户的期望效果不符。DataView组件的refresh事件处理函数中使用一个参数，代表触发事件的DataView组件。

8.2.4 selectionchange事件与deselect事件


Ext.Loader.setPath({
 'Ext': 'sdk/src'
})
Ext.require(['Ext.data.Store','Ext.dataview.DataView'])
Ext.application({
    name: 'MyApp',
    icon: 'images/icon.png',
    glossOnIcon: false,
    phoneStartupScreen: 'images/phone_startup.png',
    tabletStartupScreen: 'images/tablet_startup.png',
    launch: function() { 
        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'}
            ]   
        });
        
        var tpl = new Ext.XTemplate(
            '<tpl for=".">',                
                '<div style="font-size:12px;">',
                '<img src="{url}" title="{name}"><br/>',
                '{name}',
                '</div>',
            '</tpl>'
        );
        var editButton = Ext.create('Ext.Button',{
            text: '修改书名',
            disabled: true,
            handler: function() {
                var record = dataview.getSelection()[0];
                var bookName=record.get('name');
                Ext.Msg.prompt('编辑书名','请输入书名',//title,message(提示文字)
                function(button,value){    //使用函数来指定当单击对话框中按钮后所执行的回调函数。
                    if(button=='ok'&&value!=''){
                        var record =dataview.getSelection()[0];
                        record.set('name',value);
                    }
                },
                this, //scope指定回调寒素的作用域范围。默认为浏览器窗口
                false,//通过布尔值来指定提示信息框中的文本框组件是否可以多行显示。true允许多行，false不允许多行。也可以整型数值（单位像素）来指定高度。
                bookName,{width:280});  //弹出的信息              
            }
        });
        var toolbar=new Ext.Toolbar({
            docked:'top',
            items:[{
                      xtype:'spacer'
                  },
                  editButton
            ]
        });

        var dataview = Ext.create('Ext.DataView', {
            fullscreen:true,
            scrollable:'vertical',
            store: store,
            items:toolbar,
            itemTpl:tpl,
            listeners:{
                selectionchange:function(list,records){
                    editButton.setDisabled(false);
                }
            }
        });
        Ext.Viewport.add(dataview);
    }
});

在浏览器中打开盖页面, 工具条中的“修改书名”按钮为无效状态。在DataView组件中选择某书，“修改书名”按钮变为有效状态。

单击“修改书名”按钮，弹出一个提示信息框，提示信息框中的文本框组件中显示用户所选择的书名。用户如果单击表单中的Cancel按钮，表单将直接被关闭。用户在文本框组件中修改书名为“HTML5与CSS3权威指南（修改后）”并单击OK按钮，则在DataView组件中所选择的书名改为“HTML5与CSS3权威指南(修改后)”。

红色部分Ext.Msg.prompt方法最多允许使用7个参数。

本例中使用按钮组件的setDisabled方法设置按钮的有效性，方法如下：editButton.setDisabled(false);//设定为有效（允许点击）

使用DataView组件的deselect方法，可以将DataView组件中的某条记录或某些记录设定为非选取状态。

dataview.deselect(0);//将第一条记录设定为非选取状态

dataview.deselect(record) //将record变量所引用的记录设定为非选取状态

dataview.deselect(records) //将records数组中所有记录设定为非选取状态