Extjs Grid- 禁用特殊行上的某些复选框 [英] Extjs Grid- disable some checkbox on special row
本文介绍了Extjs Grid- 禁用特殊行上的某些复选框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的 gridpanel
和一个 column
使用 xtype:checkcolumn
I have a simple gridpanel
with a column
using xtype:checkcolumn
Ext.define('Ext.abc.grid', {
extend: 'Ext.grid.Panel',
columns: [
{
text: 'id', dataIndex: 'id'
},
{ text: 'status', dataIndex: 'abc',
xtype: 'checkcolumn',
/*viewConfig: {
getClass: function(Value, metaData, record){
})
},*/
listeners:{
beforecheckchange: function(column, row, checked, opts){
},
checkchange:function(cc,ix,isChecked){
}
}
}
]
});
我想按列 ID 在特殊行上禁用某些复选框.是否可以?我怎样才能做到这一点?谢谢.
I want to disable some checkboxes on a special row by column id. Is it possible? How can I do that? Thanks.
推荐答案
我看了一下Ext.grid.column.CheckColumn
的代码,我觉得用不那么干扰的方式来实现什么你想要的是:
I took a look into the code of Ext.grid.column.CheckColumn
, and I think the less intrusive way to achieve what you want is to:
使用经过调整的模型,以防止在所需条件下进行修改.
Use a tweaked model that prevent modification on the desired condition.
覆盖列 renderer
为不可检查的记录添加禁用类.
Override the column renderer
to add the disabled class for record that are not checkable.
示例:
// Using anonymous model class just to show that you can do this,
// if you don't need to define an application-wide model
var model = Ext.define(null, {
extend: 'Ext.data.Model'
,fields: ['id', 'status', 'checkable']
// example data
,proxy: {
type: 'memory'
,reader: 'array'
,data: [
[1, true, true]
,[2, true, false]
,[3, false, true]
,[4, false, false]
]
}
// 1. Prevent modification on certain conditions
,set: function(field, value) {
if (field === 'status' && !this.get('checkable')) {
return null;
} else {
return this.callParent(arguments);
}
}
});
Ext.widget('grid', {
renderTo: Ext.getBody()
,height: 200
,store: {
model: model
,autoLoad: true
}
,columns: [{
text: 'id'
,dataIndex: 'id'
},{
text: 'status'
,dataIndex: 'status'
,xtype: 'checkcolumn'
// 2. Custom renderer to reflect "checkability"
,renderer: function(value, meta, record) {
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkcolumn'];
if (
this.disabled
// this is the added condition for disabledCls
|| !record.get('checkable')
) {
meta.tdCls += ' ' + this.disabledCls;
}
if (value) {
cls.push(cssPrefix + 'grid-checkcolumn-checked');
}
return '<img class="' + cls.join(' ') + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
}
},{
text: 'modifiable'
,dataIndex: 'checkable'
,xtype: 'booleancolumn'
}]
});
这篇关于Extjs Grid- 禁用特殊行上的某些复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文