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

Ext2中Checkbox如何获得页面焦点

    博客分类:
  • Ext
阅读更多
在做Ext页面的回车键导航的时候发现一个bug,就是Ext的Checkbox无法获得焦点,到Google搜了一下,发现已经有人打出了补丁,在这里转载一下:

//重载了Checkbox
Ext.override(Ext.form.Checkbox, {
    onRender: function(ct, position){
        Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
        if(this.inputValue !== undefined){
            this.el.dom.value = this.inputValue;
        }
        //this.el.addClass('x-hidden');
        this.innerWrap = this.el.wrap({
            //tabIndex: this.tabIndex,
            cls: this.baseCls+'-wrap-inner'
        });
        this.wrap = this.innerWrap.wrap({cls: this.baseCls+'-wrap'});
        this.imageEl = this.innerWrap.createChild({
            tag: 'img',
            src: Ext.BLANK_IMAGE_URL,
            cls: this.baseCls
        });
        if(this.boxLabel){
            this.labelEl = this.innerWrap.createChild({
                tag: 'label',
                htmlFor: this.el.id,
                cls: 'x-form-cb-label',
                html: this.boxLabel
            });
        }
        //this.imageEl = this.innerWrap.createChild({
            //tag: 'img',
            //src: Ext.BLANK_IMAGE_URL,
            //cls: this.baseCls
        //}, this.el);
        if(this.checked){
            this.setValue(true);
        }else{
            this.checked = this.el.dom.checked;
        }
        this.originalValue = this.checked;
    },
    afterRender: function(){
        Ext.form.Checkbox.superclass.afterRender.call(this);
        //this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
        this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
    },
    initCheckEvents: function(){
        //this.innerWrap.removeAllListeners();
        this.innerWrap.addClassOnOver(this.overCls);
        this.innerWrap.addClassOnClick(this.mouseDownCls);
        this.innerWrap.on('click', this.onClick, this);
        //this.innerWrap.on('keyup', this.onKeyUp, this);
    },
    onFocus: function(e) {
        Ext.form.Checkbox.superclass.onFocus.call(this, e);
        //this.el.addClass(this.focusCls);
        this.innerWrap.addClass(this.focusCls);
    },
    onBlur: function(e) {
        Ext.form.Checkbox.superclass.onBlur.call(this, e);
        //this.el.removeClass(this.focusCls);
        this.innerWrap.removeClass(this.focusCls);
    },
    onClick: function(e){
        if (e.getTarget().htmlFor != this.el.dom.id) {
            if (e.getTarget() !== this.el.dom) {
                this.el.focus();
            }
            if (!this.disabled && !this.readOnly) {
                this.toggleValue();
            }
        }
        //e.stopEvent();
    },
    onEnable: Ext.form.Checkbox.superclass.onEnable,
    onDisable: Ext.form.Checkbox.superclass.onDisable,
    onKeyUp: undefined,
    setValue: function(v) {
        var checked = this.checked;
        this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
        if(this.rendered){
            this.el.dom.checked = this.checked;
            this.el.dom.defaultChecked = this.checked;
            //this.wrap[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
            this.imageEl[this.checked ? 'addClass' : 'removeClass'](this.checkedCls);
        }
        if(checked != this.checked){
            this.fireEvent("check", this, this.checked);
            if(this.handler){
                this.handler.call(this.scope || this, this, this.checked);
            }
        }
    },
    getResizeEl: function() {
        //if(!this.resizeEl){
            //this.resizeEl = Ext.isSafari ? this.wrap : (this.wrap.up('.x-form-element', 5) || this.wrap);
        //}
        //return this.resizeEl;
        return this.wrap;
    }
});
Ext.override(Ext.form.Radio, {
    checkedCls: 'x-form-radio-checked'
});

css修改:

<style type="text/css">
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:auto;}
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:auto;}
.x-form-check-wrap,.x-form-radio-wrap{padding:1px 0 3px;line-height:18px;}
.ext-ie .x-form-check-wrap,.ext-ie .x-form-radio-wrap{padding-top:3px;}
.ext-strict .ext-ie7 .x-form-check-wrap,.ext-strict .ext-ie7 .x-form-radio-wrap{padding-bottom:1px;}
.x-form-check-wrap-inner,.x-form-radio-wrap-inner{display:inline;padding:0;}
.x-form-check,.x-form-radio{height:13px;width:13px;vertical-align:bottom;margin:2px 0;}
.ext-ie .x-form-check,.ext-ie .x-form-radio{margin-top:1px;}
.ext-strict .ext-ie7 .x-form-check,.ext-strict .ext-ie7 .x-form-radio{margin-bottom:4px;}
.ext-opera .x-form-check,.ext-opera .x-form-radio{margin-top:3px;}
.x-form-check-focus .x-form-check,.x-form-check-over .x-form-check,.x-form-check-focus .x-form-radio,.x-form-check-over .x-form-radio{background-position:-13px 0;}
.x-form-check-down .x-form-check,.x-form-check-down .x-form-radio{background-position:-26px 0;}
.x-item-disabled .x-form-check,.x-item-disabled .x-form-radio{background-position:-39px 0;}
.x-form-check-checked,.x-form-radio-checked{background-position:0 -13px;}
.x-form-check-focus .x-form-check-checked,.x-form-check-over .x-form-check-checked,.x-form-check-focus .x-form-radio-checked,.x-form-check-over .x-form-radio-checked{background-position:-13px -13px;}
.x-form-check-down .x-form-check-checked,.x-form-check-down .x-form-radio-checked{background-position:-26px -13px;}
.x-item-disabled .x-form-check-checked,.x-item-disabled .x-form-radio-checked{background-position:-39px -13px;}
.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input{position:absolute;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>

具体修改方法就是建两个文件checkbox.js和checkbox.css分别存放上面的内容,然后在你要用到Checkbox之前在页面引入就ok了。
分享到:
评论

相关推荐

    Ext表单组件之checkbox

    本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET中,我们可以为每个TreePanel节点添加Checkbox,通过配置`CheckBoxModel`来控制其行为。以下是一些关键知识点: 1. **CheckBoxModel配置**: - `Checkable`: 这个属性用来指定节点是否可被选中,设置为`...

    Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选

    Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选

    EXT TREE 扩展CHECKBOX JS

    在EXT JS中,树形组件(Tree Panel)常用于展现层级结构的数据,而扩展CHECKBOX功能则允许用户对树节点进行多选操作。 在EXT JS的Tree Panel中,要实现复选框功能,我们需要自定义UI Provider。UI Provider是EXT JS...

    EXT checkbox 的 check 事件

    EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。

    Ext checkBoxGroup的用法和取值

    `Ext JS`中的`checkBoxGroup`是一个方便的组件,它允许用户在一个组内多选或单选复选框。`checkBoxGroup`常用于数据过滤、设置偏好或选择多个选项的场景。我们首先来了解如何在代码中创建一个`checkBoxGroup`。 ```...

    完美解决ListView和CheckBox的焦点冲突及CheckBox的复用问题

    然而,当ListView中的元素包含可交互的控件,如CheckBox时,会遇到一些常见问题,如焦点冲突和视图复用导致的显示异常。本文将详细探讨这些问题以及如何通过优化来实现“完美解决ListView和CheckBox的焦点冲突及...

    listview和checkbox抢焦点

    然而,在实际应用中,ListView中的每一项(Item)如果包含了CheckBox,就可能出现“listview和checkbox抢焦点”的问题。这个问题主要表现在用户点击ListView项时,系统焦点可能无法正确地在ListView和CheckBox之间...

    ListView中添加CheckBox

    2、选择其中的checkbox,当滚动ListView的时候,会出现一些Checkbox选择错位的现象, 原因:为记住Checkbox的选择状态 解决方案:当选择Checkbox的时候,记下其状态,然后在getView方法中进行设置

    Ext模拟下拉多选checkbox

    Extjs 模拟下拉多选checkbox

    Ext.net TreePanel的Checkbox操作及父子节点联动(修正)

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,例如文件系统、组织结构等。本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果,特别是针对之前存在的Bug进行...

    Flex Tree 中Checkbox

    2. **Checkbox集成**:在Flex Tree中添加Checkbox,通常是为了提供多选功能。这需要自定义TreeItemRenderer,以便在每个节点上显示一个Checkbox。当用户勾选Checkbox时,表示选择了该节点。这个自定义的renderer需要...

    ext checkboxgroup 回填数据解决

    重写 代码如下: //解决checkboxgroup回填数据问题 Ext.override(Ext.form.BasicForm,{ findField : function(id){ var field = this.items.get(id); if(!field){ this.items.each(function(f){ if(f.isXType(...

    获取GridView中Checkbox的值

    在ASP.NET开发中,GridView控件常用于展示数据表格,而Checkbox则经常被用来实现用户选择功能。在“获取GridView中Checkbox的值”这个场景下,我们通常关注的是如何在用户交互后,如点击按钮时,获取到GridView中被...

    table中checkbox取值

    在网页设计和开发中,表格(Table)是展示数据常用的一种布局方式,而复选框(Checkbox)则是用户交互的重要元素之一。当我们需要在表格中使用复选框时,往往需要处理它们的值,比如选中状态的获取、传递或者存储。...

    动态获取recyclerView中CheckBox的值

    2. **在Activity或Fragment中使用CheckBox状态**:通过调用`DistributeAdapter.getMap()`方法,可以获取用户选择的所有CheckBox的状态,进而进行后续逻辑处理。 #### 三、注意事项 - **性能优化**:在处理大量数据...

    C#中获取CheckBox选中值(多选)

    在C#编程语言中,处理用户界面元素如CheckBox的选中状态是一项常见需求,尤其是在涉及多选场景时。本文将深入探讨如何在C#中有效且简洁地获取多个CheckBox控件的选中值,这对于构建响应式和用户友好的应用程序至关...

    js获得Gridview中选中checkbox行的信息

    2. **获取选中状态**:在事件处理函数中,我们可以检查Checkbox的`checked`属性来确定其是否被选中: ```javascript if (this.checked) { // 处理选中状态 } else { // 处理未选中状态 } ``` `this`关键字...

    从xml中改变checkBox大小和形状

    CheckBox作为用户界面中的一个常见组件,常用于实现二选一的选择功能。在Android中,我们可以通过自定义样式和修改XML属性来实现对CheckBox外观的调整。 首先,我们来了解CheckBox的基本结构。在Android的布局XML...

Global site tag (gtag.js) - Google Analytics