`
elstage
  • 浏览: 79874 次
  • 性别: Icon_minigender_1
  • 来自: 地球
社区版块
存档分类
最新评论

Ext2中实现全页面键盘导航

    博客分类:
  • Ext
阅读更多
Ext2中实现全页面键盘导航,通俗点说就是回车键有Tab键的效果。在Google上搜到了一段代码,在此基础上做了一些修改,能够满足更复杂的情况:

/**
* 表单全键盘导航功能 xFocus:可选参数,用于设定页面加载完成后默认获取焦点的表单项,支持索引号和id/dom类型参数传入。
*/
var keyNav = function(xFocus) {
var run = function() {
//查找所有非隐藏的录入项,排除掉css的class等于"x-tbar-page-number"的项,就是Ext Grid的分页条中的一个输入框
//遇到类似特殊情况都可以这么排除
var all = Ext.DomQuery.select('input[type!=hidden][class!="x-tbar-page-number"]');
Ext.each(all, function(o, i, all) { // 遍历并添加enter的监听
        Ext.get(o).addKeyMap( {
            key :13,
            fn : function() {
            try {
                all[i + 1].focus();
            } catch (e) {
                event.keyCode = 9;
            }
            if (all[i + 1] && /button|reset|submit/.test(all[i + 1].type))
                all[i + 1].click(); // 如果是按钮则触发click事件
            return true;
            }
        })
        });

document.body.focus(); // 使页面获取焦点,否则下面设定默认焦点的功能有时不灵验
try {
    var el;
    if (typeof eval(xFocus) == 'object') { // 如果传入的是id或dom节点
        el = Ext.getDom(xFocus).tagName == 'input' ? Ext.getDom(xFocus) : Ext.get(xFocus).first('input', true); // 找到input框
    } else {
        el = all[xFocus || 0]; // 通过索引号找
    }
    el.focus();
} catch (e) {
}
}
Ext.isReady ? run() : Ext.onReady(run); // 页面加载完成后添加表单导航
}

具体使用就是在页面的js最后加上keyNav(Ext.getCmp("name")); //name可以是第一个输入项的名称
分享到:
评论

相关推荐

    整理的Ext API详解

    Ext.KeyNav KeyMap JSON Format DelayedTask TaskRunner TextMetrics XTemplate.txt"涵盖了键盘导航(KeyNav)、键映射(KeyMap)等高级交互功能,JSON格式处理,延迟任务(DelayedTask)和任务调度(TaskRunner)以...

    ext.net常见问题收集

    另外,使用`KeyNav`组件可以控制键盘导航,例如`<ext:KeyNav ID="keynav1" runat="server" Target="#{txtPassword}">`,并配置`Enter`或`Tab`等按键的行为。 这些是EXT.NET中常见的问题及其解决方法,它们涉及到...

    ext 2.0

    10. **可访问性**:考虑到无障碍访问,Ext 2.0提供了一些辅助功能,如键盘导航和屏幕阅读器兼容性。 总的来说,Ext 2.0是一个功能全面、性能卓越的前端开发框架,特别适合开发需要复杂用户界面和数据管理的企业级...

    Ext Js权威指南(.zip.001

    5.5.2 键盘导航:ext.util.keynav / 204 5.6 综合实例:股票数据的实时更新 / 205 5.7 本章小结 / 214 第6章 选择器与dom操作 / 215 6.1 ext js的选择器:ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2...

    ext 4.0 日期选择控件 时分秒 中文版

    5. **键盘操作**:支持键盘导航,提高用户交互体验。 6. **可扩展性**:可以与其他EXT组件(如时间滑块)结合,创建更复杂的日期时间选择器。 在压缩包中的 "datetime4" 文件可能包含了以下内容: - **样式文件**...

    ext4.2 日历日期控件,可以选择时分秒

    7. **无障碍性**:考虑到不同用户的需求,EXTJS的控件通常会遵循无障碍设计原则,确保键盘导航和屏幕阅读器的兼容性。 8. **兼容性**:EXTJS 4.2对主流浏览器有良好的支持,包括Chrome、Firefox、Safari、IE9+等。 ...

    Ext的CKEditor组件

    7. ** Accessibility 支持**:CKEditor还考虑到了无障碍性(Accessibility),提供了键盘导航和屏幕阅读器的支持,使得有特殊需求的用户也能顺利地使用编辑器。 8. **多实例**:在同一个页面上,你可以创建多个...

    ext 可编辑treegrid组件

    4. **键盘导航**:通过键盘可以轻松地在TreeGrid的单元格间移动并进行编辑,提供无障碍访问。 5. **数据验证**:在用户输入数据后,可以进行实时验证,确保输入的数据符合预设的规则和格式。 6. **事件处理**:提供...

    很绚丽的EXT例子(功能还蛮多的)

    例子可能包含了键盘导航和屏幕阅读器支持。 这个压缩包中的"很绚丽的EXT例子,可以直接跑",意味着你下载后无需额外配置即可直接运行,可能是通过HTML文件加载EXT库和相关的JavaScript代码来展示这些功能。通过学习...

    EXT 时间控件 3.0以上使用

    在设计EXT应用时,应考虑无障碍性,确保键盘导航和屏幕阅读器兼容性。DateTimeField应该能够通过键盘操作来选择日期和时间,并为辅助技术提供合适的元数据。 8. **性能优化**: 当处理大量DateTimeField时,考虑...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    5. **可访问性**:对于无障碍功能(Accessibility)的支持,比如键盘导航和屏幕阅读器兼容性。 6. **自定义功能**:如果存在特殊需求,如自定义标签样式、节点图标等,要验证这些功能是否按预期工作。 在提供的...

    Github-JumpToObjCCounterPart-ChromeExt:Control+Command+Up 快捷键在 Github 中的 Objective-C 文件中的标题和实现之间导航

    JavaScript文件则包含了实现快捷键功能的具体逻辑,比如监听 "Control+Command+Up" 键盘事件,以及根据当前页面上下文判断如何正确跳转到Objective-C的接口或实现部分。 综上所述,这个Chrome扩展通过JavaScript...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    ExtJs4新类库特性详解及JS新语法扩展.docx

    在ExtJS4中,为了提高应用性能和减少页面加载时间,引入了动态加载的概念。通过`Ext.Loader`,可以在运行时按需加载所需的类。例如,设置Loader启用动态加载: ```javascript Ext.Loader.setConfig({ enabled: ...

    uubookkit-ext:适用于BookKit的Chrome扩展程序。 它将有用的链接添加到页面中

    uuBookKit-ext 它将有用的链接添加到页面中。 页面标题是指向知识库的链接 添加了用于编辑文档结构的铅笔图标(如果用户具有权限) 添加了用于编辑文档的MD链接(如果使用具有权限) 添加了用于编辑每个部分的...

    ExtJS颜色选择器(mordern版)

    7. **无障碍性**:考虑到无障碍标准,颜色选择器应有良好的键盘导航和屏幕阅读器支持。 8. **响应式设计**:在不同设备和屏幕尺寸上都能保持良好的用户体验。 为了在项目中使用这个颜色选择器插件,开发者首先需要...

    ExtJS 皮肤大全

    确保色彩对比度足够,键盘导航可用,以及所有元素都有合适的辅助文本,使视觉障碍的用户也能方便地使用应用。 8. **跨浏览器支持** ExtJS皮肤需要在多种浏览器下正常工作。测试皮肤在不同浏览器(如Chrome、Fire...

    javascript与用户空闲

    其次,`window.onbeforeunload`事件可以在用户尝试离开页面(如关闭窗口、导航到其他页面)时触发,我们可以在该事件的处理函数中执行一些清理工作或显示提示信息。但需要注意的是,现代浏览器对这个事件的处理更加...

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

Global site tag (gtag.js) - Google Analytics