extjs - ¿Cómo deshabilitar el elemento de la columna de acción para una sola fila?

grid extjs4

Question

Considere esta muestra JSON:

[{id:1,editable:true},{id:2,editable:false}]

Estos registros están a punto de cargarse en una tienda, y luego se muestran dentro de un panel de cuadrícula. Esta grilla tiene un elemento de columna de acción para propósitos de edición. Estoy buscando una forma de desactivar el botón "editar" solo para la segunda fila sin realizar cálculos después del renderizado. Me gustaría utilizar una función incorporada que funcione como la propiedad del renderer lugar de recorrer la tienda para actualizar cada fila una vez que se haya procesado la cuadrícula.

¿ExtJS 4.1.1 ofrece este tipo de característica?

Answer 1

Encontré la siguiente solución en el foro Sencha: además de la función "isDisabled" ya descrita aquí, puede usar la siguiente configuración para cambiar (u ocultar) el ícono para mostrar dependiendo del registro:

getClass: function(value,metadata,record){
    if (record.get(''description'')){  //read your condition from the record
        return ''icon-pencil-go'';    // add a CSS-Class to display what icon you like
    } else {
        return '''';        //add no CSS-Class
    }
}

Mi clase CSS se define como:

.icon-pencil-go {
    background-image: url(''../images/icons/famfamfam/pencil_go.png'') !important;
}

Como de todos modos estoy mostrando íconos a través de CSS, esta es una forma rápida de cambiar íconos dinámicamente. Tenga en cuenta que desactivar el controlador a través de "isDisabled" sigue siendo nessecary, porque de lo contrario el controlador se iniciará si hace clic en la columna de acción, incluso si el icono no se muestra.

Answer 2

Había olvidado esta pregunta hasta que Louis publicó su respuesta. Finalmente decidí anular ActionColumn para agregar las características que faltan. Aquí está el código:

Ext.grid.column.Action.override({
    defaultRenderer: function (v, meta) {
        var me = this,
            disabled, tooltip,
            prefix = Ext.baseCSSPrefix,
            scope = me.origScope || me,
            items = me.items,
            len = items.length,
            i = 0,
            item;
        v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '''' : '''';
        meta.tdCls += '' '' + Ext.baseCSSPrefix + ''action-col-cell'';
        for (; i < len; i++) {
            item = items[i];
            disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : false);
            tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
            if (!item.hasActionConfiguration) {
                item.stopSelection = me.stopSelection;
                item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                item.hasActionConfiguration = true;
            }
            v += ''<img alt="'' + (item.altText || me.altText) + ''" src="'' + (item.icon || Ext.BLANK_IMAGE_URL) +
            ''" class="'' + prefix + ''action-col-icon '' + prefix + ''action-col-'' + String(i) + '' '' + (disabled ? prefix + ''item-disabled'' : '' '') +
            '' '' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '''')) + ''"'' +
            (tooltip ? '' data-qtip="'' + tooltip + ''"'' : '''') + '' />'';
        }
        return v;
    }
});

Answer 3

He utilizado lo siguiente en la versión ExtJs 6.0.1 y funciona bien. Use la configuración ''getClass''. Una función que devuelve la clase CSS para aplicarla a la imagen del icono.

                {
                  xtype: ''actioncolumn'',
                  flex: 1,
                  text: ''Action''
                  items: [{
                      tooltip: ''Import'',
                      getClass: function (value, meta, record) {
                         if(record.get(''Name'') == ''disable''){
                             return ''x-hidden''; // when u want to hide icon
                         }
                      }
                         return ''x-grid-icon'' ; // show icon


                  }]
                }

Answer 4

Puede usar set the isDisabled config (al menos desde la versión 4.2.1):

{
    xtype:''actioncolumn'',
    width:20,
    items: [
        {
            icon: ''app/images/edit.png'',
            tooltip: ''Edit this row'',
            handler: function(gridview, rowIndex, colIndex, item, e, record, row) {
                var grid=gridview.up(''grid'');
                // You need to listen to this event on your grid.
                grid.fireEvent(''editRecord'', grid, record);
            },
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                // Returns true if ''editable'' is false (, null, or undefined)
                return !record.get(''editable'');
            }
    ]
}

Cuando isDisabled (..) devuelve true, el icono se ve borroso y el controlador no se activa al hacer clic con el mouse.

Answer 5

Voy a comenzar diciendo esto: evito usar la columna de acción a toda costa, es completamente incapaz de hacer ningún tipo de lógica de representación (como diferentes imágenes por fila, y muestra de forma condicional en función del modelo de fila). En su lugar, defina una columna regular que represente una imagen y aproveche el evento de clic en la columna. Aquí hay un ejemplo de mi código:

{
    header:    " ",
    dataIndex: "some_index",
    width:     26,
    renderer: function(value, metaData){
        metaData.style += "padding:0px;";
        if(value)
            return "&nbsp;<img src=/"extjs/4.0/sms/icons/fam/magnifier.png/"/>";
        return value;
    },
    listeners: {
        click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){
            var store = myGrid.getStore();
            var record = store.getAt(rowIndex);
            if(record.get("some_index"))
                //do action
        }
    }
}