Deaktivieren der Spalte "Aktion" Element für eine einzelne Zeile?

Betrachten Sie dieses JSON-Beispiel :

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

Diese Datensätze werden geladen, im store angezeigt wird dann innerhalb einer grid-panel. Dieses raster hat eine Spalte "Aktion" Element für die Ausgabe Zwecke. Ich bin auf der Suche nach einer Möglichkeit zum deaktivieren der Schaltfläche "Bearbeiten" nur für die zweite Zeile, ohne eine Berechnung nach dem Rendern. Ich würde gerne eine eingebaute Funktion, die funktioniert wie die renderer Eigenschaft als Schleife über den store zu aktualisieren, die jede Zeile einmal das raster gerendert wurde.

Tut ExtJS 4.1.1 bietet diese Art von Funktion?

InformationsquelleAutor leaf | 2013-03-21
  1. 27

    Können Sie verwenden die isDisabled config (zumindest ab version 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');
            }
    ]
}

    Wenn isDisabled(..) gibt true zurück, das Symbol ist verschwommen, und der handler nicht ausgelöst, auf die Maus klicken.

    • gutes Beispiel, funktioniert Super. Meine obly Vorschlag ist, dass die Feldnamen, wenn für die Anzeige sollte sich in übereinstimmung mit der config-option. IE 'displayIsDisabled'
    InformationsquelleAutor Louis
  2. 9

    Ich werde einfach zu beginnen mit den Worten: ich vermeiden, über die Aktion-Spalte auf allen Kosten, ist es völlig nicht in der Lage zu tun, jede Art von rendering-Logik (wie verschiedene Bilder pro Zeile, und zeigt, bedingt auf die Zeilen-Modell). Stattdessen definieren Sie eine regelmäßige Spalte macht, dass ein Bild und nutzt das click-Ereignis in der Spalte. Hier ist ein Beispiel aus meinem code:

    {
    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
        }
    }
}
    • Hi Reimius. Das ist schön, aber ein bisschen zu Komplex, da die eingebauten features sind verloren. (jsFiddle)
    • Welche Funktionen fehlen?
    • Sorry für die nicht klar ist. Ich meinte, dass ich haben werde, zu schreiben, einige zusätzliche Stück des styles und die Logik, die bereits über die Aktion Spalten. Zum Beispiel denke ich über das disableAction Methode, oder die Fähigkeit, einfache Elemente anfügen, die nebeneinander in einer einzelnen Spalte mit einer einfachen config-array. Vielleicht ist meine Frage nicht detailliert genug.
    • Mein code-Beispiel ist so einfach, wie es kommt. Ext-4.1.1 nicht die Funktion, die Sie wollen, ohne benutzerdefinierten code.
    • Ich verwendet, um dies zu tun, ich habe eine Spalte w/ ein kleines Datei-Symbol, welches nicht belegen allen Platz der Spalte. Benutzer beschwert sich, dass das klicken auf der Zelle und nicht in die Symbol-Datei selbst löst die Aktion aus, aber... Hast du einen Weg finden, dies zu tun?
    • Ja, wenn Sie wollen, dass Sie brauchen, um sich in die Falle ging Sie in den click-handler. Dieses Ereignis hat eine currentTarget oder etwas so ist, und Sie können sehen, wenn, dass ist das Bild.
    • Das ist falsch, und immer codiert. Verwenden Sie css und die getClass das Aussehen zu verändern und fühlen sich von bestimmten Zeilen. Alternativ können Sie auch eine afterrender Zuhörer in Ihrem Netz.
    • Haben Sie betrachten die version hier im Einsatz? Diese Antwort war für Extjs 4.1.1. Auch, wenn Sie versuchen, hilfreich zu sein, führe bitte die Dokumentation für css-und getClass (wie in dem Sie verwendet werden sollten), wie diese sind sehr Allgemeine Dinge zu sagen und verwendet fast überall.

    InformationsquelleAutor Reimius
  3. 2

    Hatte ich vergessen diese Frage, bis Louis geschrieben seine Antwort. Entschied ich mich schließlich zu überschreiben ActionColumn hinzufügen der fehlenden features. Hier ist der code :

    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;
    }
});
    • Ich habe es auf dem selben Weg
    • Ja, ich hab das so auch.
    InformationsquelleAutor leaf
  4. 2

    Fand ich folgende Lösung, die bei der Sencha-Forum:
    Zusätzlich zu den "isDisabled"-Funktion bereits hier beschrieben, können Sie mit der folgenden config zu ändern (oder ausblenden) das Symbol, um die Anzeige je nach Datensatz:

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

    Meine CSS-Klasse definiert ist als:

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

    Als ich die Darstellung von Icons via CSS sowieso, das ist eine schnelle Möglichkeit für mich, zu ändern, die icons dynamisch. Bitte beachten Sie, dass das deaktivieren der handler über "isDisabled" ist noch immer gerade nötig ist, weil sonst die Prozedur würde starten, wenn Sie klicken Sie auf die Spalte Aktion, auch wenn das Symbol nicht angezeigt.

    • Ich kann nicht versuchen, Ihre Lösung, da habe ich aufgehört zu arbeiten auf das zugehörige Projekt vor langer Zeit 😐 Trotzdem, danke für deinen Beitrag, kann es hilfreich sein, für einige andere Leute 🙂
    • diese nicht entfernen tooltip, nur für den Wechsel sehen und zu fühlen.
    InformationsquelleAutor janinab42
  5. 1

    Ive verwendet die folgenden im ExtJs 6.0.1 version und funktioniert gut. Verwenden Sie 'getClass' config.
    Eine Funktion gibt die CSS Klasse für das Symbol Bild.

                    {
                  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


                  }]
                }
    • ExtJS 6! Die Zeit fliegt 🙂 Leider bin ich nicht in der Lage, bewerten Sie Ihre nicht mehr posten, dies ist ein Auftrag für die neue generation 🙂 Danke für deinen Beitrag trotzdem!
    InformationsquelleAutor user1463110
Schreibe einen Kommentar