在做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,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....
在EXT.NET中,我们可以为每个TreePanel节点添加Checkbox,通过配置`CheckBoxModel`来控制其行为。以下是一些关键知识点: 1. **CheckBoxModel配置**: - `Checkable`: 这个属性用来指定节点是否可被选中,设置为`...
Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选
在EXT JS中,树形组件(Tree Panel)常用于展现层级结构的数据,而扩展CHECKBOX功能则允许用户对树节点进行多选操作。 在EXT JS的Tree Panel中,要实现复选框功能,我们需要自定义UI Provider。UI Provider是EXT JS...
EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。
`Ext JS`中的`checkBoxGroup`是一个方便的组件,它允许用户在一个组内多选或单选复选框。`checkBoxGroup`常用于数据过滤、设置偏好或选择多个选项的场景。我们首先来了解如何在代码中创建一个`checkBoxGroup`。 ```...
然而,当ListView中的元素包含可交互的控件,如CheckBox时,会遇到一些常见问题,如焦点冲突和视图复用导致的显示异常。本文将详细探讨这些问题以及如何通过优化来实现“完美解决ListView和CheckBox的焦点冲突及...
然而,在实际应用中,ListView中的每一项(Item)如果包含了CheckBox,就可能出现“listview和checkbox抢焦点”的问题。这个问题主要表现在用户点击ListView项时,系统焦点可能无法正确地在ListView和CheckBox之间...
2、选择其中的checkbox,当滚动ListView的时候,会出现一些Checkbox选择错位的现象, 原因:为记住Checkbox的选择状态 解决方案:当选择Checkbox的时候,记下其状态,然后在getView方法中进行设置
Extjs 模拟下拉多选checkbox
在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,例如文件系统、组织结构等。本文将详细讲解如何实现TreePanel中的Checkbox操作以及父子节点间的联动效果,特别是针对之前存在的Bug进行...
2. **Checkbox集成**:在Flex Tree中添加Checkbox,通常是为了提供多选功能。这需要自定义TreeItemRenderer,以便在每个节点上显示一个Checkbox。当用户勾选Checkbox时,表示选择了该节点。这个自定义的renderer需要...
重写 代码如下: //解决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(...
在ASP.NET开发中,GridView控件常用于展示数据表格,而Checkbox则经常被用来实现用户选择功能。在“获取GridView中Checkbox的值”这个场景下,我们通常关注的是如何在用户交互后,如点击按钮时,获取到GridView中被...
在网页设计和开发中,表格(Table)是展示数据常用的一种布局方式,而复选框(Checkbox)则是用户交互的重要元素之一。当我们需要在表格中使用复选框时,往往需要处理它们的值,比如选中状态的获取、传递或者存储。...
2. **在Activity或Fragment中使用CheckBox状态**:通过调用`DistributeAdapter.getMap()`方法,可以获取用户选择的所有CheckBox的状态,进而进行后续逻辑处理。 #### 三、注意事项 - **性能优化**:在处理大量数据...
在C#编程语言中,处理用户界面元素如CheckBox的选中状态是一项常见需求,尤其是在涉及多选场景时。本文将深入探讨如何在C#中有效且简洁地获取多个CheckBox控件的选中值,这对于构建响应式和用户友好的应用程序至关...
2. **获取选中状态**:在事件处理函数中,我们可以检查Checkbox的`checked`属性来确定其是否被选中: ```javascript if (this.checked) { // 处理选中状态 } else { // 处理未选中状态 } ``` `this`关键字...
CheckBox作为用户界面中的一个常见组件,常用于实现二选一的选择功能。在Android中,我们可以通过自定义样式和修改XML属性来实现对CheckBox外观的调整。 首先,我们来了解CheckBox的基本结构。在Android的布局XML...