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

Question

我需要根据我得到的查询结果加载网格.我在加载网格中的文本字段时没有任何问题,但是有一个特定的列是复选框类型.我正在使用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);
        }
    }

此渲染器功能对我不起作用.渲染器应该怎么样？你能告诉我如何解决这个问题吗？谢谢....

Answer 1

哇,我觉得这会更容易,但事实证明......不是那么多......

你将不得不做两件事:

1 - 更改checkcolumn渲染器

2 - 如果用户单击以"N"作为值的记录,则添加beforecheckchange侦听器以返回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');
    }
});

我创建了一个小提琴:https://fiddle.sencha.com/#fiddle/bqd

Answer 2

稍微简单的方式帮助了我

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