Ext GridPanel实现复选框选择框:
var selectModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false
});
但是这样每一行都会有复选框,如果需求为:某行数据的某个列满足什么条件我才有复选框选项就不太好实现了,
这样就需要重写Ext.grid.CheckboxSelectionModel的渲染,行点击涵数来实现.
var selectModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false,
renderer : function(v, p, record){
if (record.data['结果状态'] == '0'){
return '';
}
return '<div class="x-grid3-row-checker"> </div>';
},
onHdMouseDown : function(e, t) {
if (t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked){
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
}else {
hd.addClass('x-grid3-hd-checker-on');
if (this.locked){
return;
}
this.selections.clear();
for (var i = 0, len = this.grid.store.getCount(); i < len; i++ ){
if (this.grid.store.getAt(i).data["结果状态"] != '0'){
this.selectRow(i, true);
}
}
}
}
},
handleMouseDown : function(g, rowIndex, e){
if (e.button !== 0 || this.isLocked()) {
return;
}
var view = this.grid.getView();
if (e.shiftKey && !this.singleSelect && this.last != false ) {
var last = this.last;
this.selectRange(last, rowIndex, e.ctrlKey);
this.last = last;
view.focusRow(rowIndex);
}else{
var isSelected = this.isSelected(rowIndex);
if (e.ctrlKey && isSelected) {
this.deselectRow(rowIndex);
}else if(!isSelected || this.getCount() > 1){
if(this.grid.store.getAt(rowIndex).data["结果状态"] != '0'){
this.selectRow(rowIndex, e.ctrlKey || e.shiftKey);
}
view.focusRow(rowIndex);
}
}
}
});
分享到:
相关推荐
在Extjs中,GridPanel组件是非常常用的一个表格组件,它提供了丰富的功能来...总的来说,通过上述方法,我们可以在Extjs的GridPanel中根据某行数据的条件控制复选框的显示及选中状态,有效地实现复杂的业务逻辑需求。
### Ext中grid多行数据全部删除 在前端开发过程中,我们经常会遇到需要处理表格数据的情况。其中,ExtJS是一个非常强大的JavaScript框架,它提供了一系列工具和组件来帮助开发者快速构建复杂的用户界面。本文将详细...
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...
总结,这个示例展示了如何使用ExtJS的GridPanel和TreePanel组件,结合后台数据读取,实现分页显示表格数据和树形结构数据,以及复选框的联动效果。在Visual Studio 2008环境中,开发者可以编写和调试这些功能,为...
首先,我们需要创建一个复选框组(CheckboxGroup)来显示可供选择的省份。在这个例子中,`$provinceCheckbox01`是一个复选框组,它通过监听`change`事件来响应用户的选择变化。 接下来,定义了一个名为`gridItems`...
要实现带有复选框的TreeGrid,我们需要在TreePanel的配置中加入`checkboxModel`,并在`columns`配置中添加一个显示复选框的列。 1. **CheckboxModel**: 这是ExtJS 4中处理复选框选择的模型,通过`selModel`配置项来...
EXT3.0的FormPanel提供了多种表单元素,如文本字段、下拉列表、复选框和单选按钮等,以及表单验证和数据提交功能。API文档将指导开发者如何创建动态表单,处理用户输入,并与服务器进行数据交互。 Charts是EXT3.0中...
EXT的FormPanel组件则提供了丰富的表单元素,如文本框、下拉框、复选框等,以及表单验证和数据绑定功能。开发者可以利用这些组件创建复杂的用户输入表单,并与服务器端进行数据交互。 EXT的布局系统是其灵活性的...
5. **CheckboxSelectionModel**:允许用户通过复选框选择多个行,可以设置为只检查不选择(checkOnly: true)。 6. **CheckColumn**:用于创建包含复选框的列,可以用于选择或标记树的节点。 7. **Editor**:在`...
7. **表单组件**:EXT 2.0提供了多种表单字段,如文本框、密码框、下拉列表、复选框和单选按钮,以及表单验证功能。 8. **Ajax和数据存储**:EXT内置了Ajax支持,方便与服务器进行异步通信。Store组件可以处理数据...
**Checkbox(复选框)** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox(组合框)** ComboBox组件结合了文本框和下拉列表的功能,用户可以在文本框中输入或从下拉列表中选择值。 ####...
8. **Form组件**:包括各种表单元素,如文本框、复选框、下拉列表等,支持表单验证和数据提交。 9. **Ajax和JsonP**:Ext提供了方便的Ajax和JsonP接口,用于与服务器进行异步通信,获取或提交数据。 10. **事件...
2. 表单(Form):EXT3.0的表单组件允许开发者创建复杂的数据输入界面,包括文本框、下拉框、复选框、单选按钮等多种控件。`Ext.form.FormPanel`是表单的基础,通过`items`属性添加字段,`fields`定义字段配置。表单...
它可以包含各种输入控件,如文本字段、复选框、下拉列表等。表单数据可以方便地提交到服务器,或者与数据存储进行双向绑定。下面是一个创建简单表单的例子: ```javascript var form = new Ext.form.FormPanel({ ...
2. **表单(Forms)**:Ext3.0提供了表单组件,包括文本字段、密码字段、复选框、单选按钮、下拉列表等。表单可以进行数据验证,确保用户输入的数据符合预设格式。`formPanel`是用于封装表单的容器,它可以包含多个...
2. 表单(Form):提供各种表单元素,如文本框、复选框、下拉列表等,以及表单验证功能。 3. 树形视图(Tree):展示层次结构的数据,可进行扩展和折叠操作。 4. 工具栏(Toolbar):用于放置按钮、菜单、分割线等,...
4. **表单组件**:Ext 2.0提供了各种表单控件,如文本框、下拉框、复选框、单选按钮等,以及强大的表单布局和验证功能。表单组件与数据模型紧密集成,方便数据的双向绑定。 5. **布局管理**:Ext 2.0的布局系统允许...
- **功能描述**:Checkbox 是一个复选框控件,用户可以通过勾选来选择或取消选择。 - **主要用途**:适用于需要用户进行多选操作的场景。 **2.18 ComboBox (Ext.form.ComboBox)** - **xtype**: `combo` - **功能...