Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Extjs:如何在加载网格时使用渲染器启用/禁用复选框_Extjs_Checkbox_Renderer - Fatal编程技术网

Extjs:如何在加载网格时使用渲染器启用/禁用复选框

Extjs:如何在加载网格时使用渲染器启用/禁用复选框,extjs,checkbox,renderer,Extjs,Checkbox,Renderer,我需要根据得到的查询结果加载网格。我在网格中加载文本字段时没有任何问题,但是有一个特定的列是复选框类型。为此,我使用xtype:“checkcolumn”。返回查询结果的对象为此particluar列返回“Y”或“N”。如果是“Y”,我需要启用该复选框,如果是“N”,则应禁用该复选框。 我使用以下代码定义我的复选框字段 { xtype: 'checkcolumn', header: "Old User", disabled: true,

我需要根据得到的查询结果加载网格。我在网格中加载文本字段时没有任何问题,但是有一个特定的列是复选框类型。为此,我使用xtype:“checkcolumn”。返回查询结果的对象为此particluar列返回“Y”或“N”。如果是“Y”,我需要启用该复选框,如果是“N”,则应禁用该复选框。 我使用以下代码定义我的复选框字段

 {
        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);
        }
    }

此渲染器函数不适用于我。渲染器应该是什么样子?。你能告诉我如何解决这个问题吗?。谢谢……

哇,我原以为这会容易些,但事实证明。。。。没那么多

你必须做两件事:

1-更改checkcolumn渲染器

2-添加beforecheckchange侦听器,以在用户单击值为“N”的记录时返回false

最终网格应如下所示:

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');
    }
});
Ext.create('Ext.grid.Panel'{
身高:250,
宽度:579,
标题:“我的网格面板”,
defaultListenerScope:true,
商店:myStore,
栏目:[
{
xtype:'gridcolumn',
数据索引:“名称”,
文本:“名称”
},
{
xtype:“检查列”,
渲染器:函数(值、元数据、记录、行索引、共索引、存储、视图){
var cssPrefix=Ext.baseCSSPrefix,
cls=cssPrefix+“网格检查列”;
if(this.disabled | | value='N'){
metaData.tdCls+=''+this.disabledCls;
}
如果(值){
cls+=''+cssPrefix+'网格检查列已检查';
}
返回“”;
},
数据索引:“旧用户”,
文本:“OldUser”,
听众:{
beforecheckchange:“onCheckcolumnBeforeCheckChange”
}
}
],
onCheckcolumnBeforeCheckChange:函数(checkcolumn、rowIndex、checked、eOpts){
var row=this.getView().getRow(rowIndex),
record=this.getView().getRecord(行);
return(record.get('oldUser')!='N');
}
});

我制作了一把小提琴:

稍微简单一点的方法帮助了我

           renderer: function(val, metaData, rec) {

              if (rec.get('usersSetId') == -1) {
                metaData.tdCls += ' ' + this.disabledCls;
              }

              return (new Ext.ux.CheckColumn()).renderer(val, metaData);

            },
            listeners: {
              beforecheckchange: function (the, rowIndex, checked, eOpts) {
                var record = the.up('grid').getStore().getAt(rowIndex);
                return (record.get('usersSetId') != -1);
              }
            }

非常感谢你的回答。这解决了我的问题。小心这个解决方案!我目前正在执行一个实现它的项目(我想他们在这里找到了它),当包含网格的视图被破坏时,使用
new Ext.ux.Checkcolumn()
创建的这些Checkcolumn仍保留在那里。这导致了性能问题,因为Ext.ComponentManager和DOM大小不断增加。我遇到的问题是,我的
renderer
函数只返回作为参数给定的
值。不修改
;只是直接的未经修改的返回。用这里给出的构造返回时,它起作用了。我不知道为什么,也不认为这个问题与我的问题相符。但是extjs6.0.0对我有帮助。
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {         

if(record.data.taskStatus == 'Success' || record.data.acknowledgeBak == true){ 
    metaData.css = " x-item-disabled"; 
  }
  return (new Ext.grid.column.CheckColumn).renderer(value);
  },
  listeners: {
  beforecheckchange: function (the, rowIndex, checked, eOpts) {
    var record = the.up('grid').getStore().getAt(rowIndex);
    return (record.get('taskStatus') != "Success" && record.get("acknowledgeBak") != true);
  }
},