资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

原创新闻 Ext JS 键映射：键盘作为第一类操作对象

2008-09-25 14:31 by 副主编 QQbyte 评论(3) 有10732人浏览
EXT

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

我强烈相信在应用中包括web应用应该将键盘作为第一类操作对象。这篇文章介绍了Ext JS拥有将键盘操作捆绑进入整个系统的能力：

Ext.KeyMap

Ext提供几个不同的组件，支持键盘导航，比如GridPanel，ComboBox和TreePanel。为了应用客户键盘操作，开发者能够使用Ext.KeyMap和Ext.KeyNav类来捆绑键盘操作给任何组件或者元素。

首先开发者需要操作的就是F1-12功能键。大多数浏览器预留一些键，通过ext-pertise，开发者能够覆盖缺省的功能为我们自己的应用使用。我们的应用完全是动态和服务器端驱动的，所以，我们必须预先定义键盘。我们可以动态创建一个键盘操作设置数组对象，通过我们新的Ext.KeyMap对象传递。 


var keys = [];
for(var i = 0;i <buttons.length;i++) {
    var btn = buttons[i];
    // fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
    var fk = eval(button.fkey);
    btn.handler = this.handleKey.createDelegate(this, [fk]);

    keys.push({
        key: fk,
        handler: this.handleKey.createDelegate(this, [fk]),
        stopEvent: true,
        scope: this
    });
}



Ext.KeyNav

另外的键操作是一些对网格键盘导航附加的功能。GridPanel从RowSelectionModel创建了键导航，查看这个 grid 例子和选择一行，你能使用上下箭头键来上下移动。 


MyGrid = Ext.extend(Ext.grid.GridPanel,{
...

afterRender : function() {
   MyGrid.superclass.afterRender.call(this);

    this.nav = new Ext.KeyNav(this.getEl(),{
        pageDown: this.pagingNav.createDelegate(this,['next']),
        pageUp: this.pagingNav.createDelegate(this, ['prev']),
        home: this.pagingNav.createDelegate(this,['first']),
        end: this.pagingNav.createDelegate(this,['last']),
        scope: this
    });
},
 
pagingNav: function(page) {
    var pt = this.getBottomToolbar();
    if (!pt[page].disabled) {
        pt.onClick(page);
    }
},

...

});


详情请查看： Ext JS has keyboard handling
来自: ajaxian.com
4
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 wangxuefeng_yctc 2009-05-12 14:45
[align=left][/align]
  • this);  
[img][/img][url][/url][flash=200,200][/flash]
引用
引用
引用
引用
[/i][i][/i][i][/i][i][/b][/i][b][b][/b][i][u][/u]
引用
引用
[img][/img][url][/url][flash=200,200][/flash]


[size=xx-small][/size]





  
2 楼 dch1287 2009-04-06 22:43  

  
fornever 写道

可能键盘操作以后会成为web应用操作方式的主流。。。

我希望如此 实在不喜欢一会儿键盘 一会儿鼠标





  
1 楼 fornever 2008-09-25 23:30  

  
可能键盘操作以后会成为web应用操作方式的主流。。。




    
    
  

  
发表评论

  
  
  您还没有登录,请您登录后再发表评论 




 
  

    

      
相关推荐

      
    
        
          
          
    
            
    
              
              
    
                
                  
                  
                  
  • 
                    第五章 Vite4+Vue3+Vtkjs 自定义按键组合
                    
    vtk.js考虑到我们会对按键组合的定义做更改，也是很贴心的提供了各种API，我们可以重置按键对应的事件，还可以去添加自定义按键组合，并且官网上面也提供了案例。
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    码农翻身讲操作系统3：硬盘与键盘的故事
                    
    但是这俩货却瞧不起我，说这是什么年代了，还在用机械式操作，读写数据的时候， 还得一个磁头在多个盘片上滑来滑去，找来找去， 速度慢的要死。    内存说：“CPU比我快100倍， 比你快100万倍，整个系统的速...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    Ext JS 4的倒数：程序员预览 Countdown to Ext JS 4: Developer Preview
                    
    谨代表全体的ExJS项目开发组成员，我本人非常由衷地宣布Ext JS 4开发者预览版本，正式可用了！ExtJS4 不但为历来变革最大的一次版本，还包含了当今JavaScript框架技术最为令人侧目的力量。从生成的HTML到高层的类...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    ExtJS 4 官方指南翻译：键盘导航 Keyboard Navigation
                    
    原文：...使用键盘的原因，无非大致两个原因：一、控制鼠标指针不及敲键盘来得快；二、某些用户用不了鼠标，这是可用性方面的问题（accessibility）。  Navigating with your keyboard is of
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    键盘导航
                    
    我们要去一个比较复杂的Ext JS修改后的版本复杂的布局。例如转换成一个应用程序是完全通过键盘访问。我们还添加键盘快捷键可能使光标移动速度比通过键盘导航。    通过本指南，你将有一个键盘导航是最需要的，以及...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    Ext JS的4.1.0的RC 1的发行说明
                    
    Ext JS的4.1.0的RC 1的发行说明  发行日期：2012年3月13，  版本号：4.1.0的RC 1    修正的错误      钮      EXTJSIV-5129 按钮不坚持宽度设置在IE9    图表      EXTJSIV-4416 图表标签  EXTJSIV-5459 设置在...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    Google Filament 源码学习（二）：三方库分类总结
                    
    前言 拿到Filament代码一头雾水，到底要怎么看呢，先从第三方库看起吧，如下对三方库进行了分类梳理。 注：刚刚开始学习，有很多库和基本概念都不是很清楚，有不当之处请大家随时指出，本人一定虚心接受。 文章目录 ...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    ext
                    
    1.ext事件封装在ext.lib.Event下。上一层还有ext.EventObject,它继续封装了ext.lib.Event。...而且ext.EventObject还封装了鼠标和键盘的一些操作。       2.element.on('click',fn,this,{single:true,delay:1...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    疯狂Ajax讲义（第3版）——jQuery/Ext JS/Prototype/DWR企业应用前端开发实战
                    
    疯狂Ajax讲义（第3版）——jQuery/Ext  JS/Prototype/DWR企业应用前端开发实战(含CD光盘1张)（畅销书升级版，企业应用前端开发实战指南）    李刚 编著    ISBN...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    这篇文章感触很深，就作为第一篇吧
                    
    从享受生活的角度上来说："程序员并不是一种最好的职业，我认为两种人可以做程序员，第一，你不做程序员，你就没有什么工作可做，或者说是即使有可以做的工作但是你非常不愿意去做；第二，你非常痴迷和爱好程序，...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    实战：一天开发一款内置游戏直播的国产版Discord应用【附源码】
                    
    本教程教大家如何1天内开发一款内置游戏直播的国产版Discord应用，用户不仅可以通过IM聊天，也可以进行语聊，看游戏直播，甚至自己进行游戏直播，无任何实时音视频底层技术的Web开发者同样适用
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    谷粒商城——第一篇 前后端基础
                    
    但是这样显然过去麻烦，每下载一个软件都要进行一次端口映射，所以如果能给虚拟机一个独立的IP地址，就可以通过直接通过IP地址访问虚拟机 使用ipconfig获取VirtualBox的ip 因为掩码是255.255.255.0，所以主机名是...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    Linux的操作系统的介绍及常用命令
                    
    Linux 是一款免费，开源，安全，高效，稳定，处理高斌发很强悍的操作系统 Linux创始人——linux（林纳斯） Linux主要发行版本   2. Unix与Linux的关系 2.1 Unix来源  2.2 Linux来源  2.3 Linux与Unix关系  2.4 Linux...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    day1 Node.js基础学习
                    
    是一个基于Chorme V8 引擎的javaScript运行时（环境）  浏览器是javaScript的前端开发运行环境 Node.js是javaScript的后端运行环境 Node.js中无法调用DOM和BOM、Ajax等浏览器内置的API  2、Node.js的路径学习 ...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    PHP开发者的JavaScript快速教程（phper简明js教程）
                    
    每一位PHP开发者或多或少的都掌握一些JavaScript知识，本文写在《云客Drupal8源码分析》前端相关章节发布前，意在帮助沉浸在后端世界的phper快速进入前端js世界（推荐phper关注学习Drupal，那是php世界的珠峰...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    Ext框架的Grid使用介绍
                    
    Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    （译）Sencha ExtJS白皮书之一：现代Web堆栈——前端技术分类以助选型
                    
    在后端，Node.js提供了用JavaScript编写的简装的事件机制，为开发者调整其服务以适应多设备奠定了基础。在前端，如寒武纪生命大爆发般涌现了诸多实验性库，帮助Web和原生开发者实现下一代用户体验。       新的架构...
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    基于springboot大学生就业信息管理系统源码数据库文档.zip
                    
    基于springboot大学生就业信息管理系统源码数据库文档.zip
    
                  
    • 
                  
                
                  
                  
                  
  • 
                    基于java的驾校收支管理可视化平台的开题报告.docx
                    
    基于java的驾校收支管理可视化平台的开题报告
    
                  
    • 
                  
                
              
    
            
    
          
    
        
      

    

  








        

        

                      
  
  
  
  


  

  
  
  
  
  
    
    
    
  

          


          

        

        





      

      

    

    



   Global site tag (gtag.js) - Google Analytics