Extjs:如何在加载网格时使用渲染器启用/禁用复选框 [英] Extjs : How to enable/disable a checkbox using renderer while loading a grid
问题描述
我需要根据我得到的查询结果加载网格。我在网格中加载文本字段没有任何问题,但是有一个特定的列是复选框类型。为此,我使用xtype:'checkcolumn'。返回查询结果的对象为此特定列返回Y或N。如果是Y,我需要启用该复选框,如果它是N,该复选框应被禁用。
我使用以下代码定义我的复选框。
I need to load a grid based on the query results I get. I am not having any issues with loading the text fields in the grid but there is one particular column which is a check box type. I am using the xtype: 'checkcolumn' for this purpose. The object that returns the query results returns a "Y" or "N" for this particluar column. If it is "Y", I need to enable the checkbox and if it is "N", the checkbox should be disabled. I am using the following code for defining my checkbox field.
{
xtype: 'checkcolumn',
header: "Old User",
disabled: true,
disabledCls:'x-item-enabled',
width: 170,
dataIndex: 'oldUser',
itemId: 'oldUser',
renderer: this.checkOldUser
}
checkOldUser: function (oldUser) {
if(oldUser== 'Y'){
this.oldUser.setDisabled(false);
}
}
此渲染器功能对我来说不起作用。渲染器怎么样?你能让我知道如何解决这个问题吗?谢谢....
This renderer function is not working for me. How should the renderer look like?. Can you please let me know how to resolve this issue?. Thanks....
推荐答案
哇,我以为这会更容易,但事实证明...不是
Wow, I thought this would be easier, but as it turns out.... not so much..
您将不得不做两件事:
1 - 更改您的checkcolumn renderer
1 - Change your checkcolumn renderer
2 - 添加一个beforecheckchange监听器返回false,以防用户点击N作为值的记录;
2 - Add a beforecheckchange listener to return false in case the user clicks on a record that has 'N' as value;
您的最终网格应该如下所示:
Your final grid should look something like this:
Ext.create('Ext.grid.Panel', {
height: 250,
width: 579,
title: 'My Grid Panel',
defaultListenerScope: true,
store: myStore,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'checkcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var cssPrefix = Ext.baseCSSPrefix,
cls = cssPrefix + 'grid-checkcolumn';
if (this.disabled || value == 'N') {
metaData.tdCls += ' ' + this.disabledCls;
}
if (value) {
cls += ' ' + cssPrefix + 'grid-checkcolumn-checked';
}
return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
},
dataIndex: 'oldUser',
text: 'OldUser',
listeners: {
beforecheckchange: 'onCheckcolumnBeforeCheckChange'
}
}
],
onCheckcolumnBeforeCheckChange: function(checkcolumn, rowIndex, checked, eOpts) {
var row = this.getView().getRow(rowIndex),
record = this.getView().getRecord(row);
return (record.get('oldUser') != 'N');
}
});
我创建了一个小提琴: https://fiddle.sencha.com/#fiddle/bqd
I created a Fiddle: https://fiddle.sencha.com/#fiddle/bqd
这篇关于Extjs:如何在加载网格时使用渲染器启用/禁用复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!