Extjs 6.5.3从记录值绑定小部件列的隐藏属性

时间:2018-07-11 13:04:12

标签: extjs binding grid extjs6

我想显示/隐藏具有记录属性的网格的小部件列。

我试图通过绑定我的值来做到这一点:

{
    xtype: 'grid',
    bind: {
        store: 'ActionList'
    },
    border: true,
    flex: 2,
    name: 'actionList',
    title: this.titleActionGrid,
    columns: [{
        xtype: 'widgetcolumn',
        height: 50,
        width: 65,
        widget: {
            xtype: 'button',
            text: '{sActionTitle}',
            scale: 'large',
            height: 45,
            width: 45,
            margin: 5
        },
        bind: {
            hidden: '{bIsHidden}'
        }
    }]
}

那没有用,所以我在互联网上搜索,发现了这个小提琴:https://fiddle.sencha.com/#view/editor&fiddle/22rl

所以我尝试了这部分代码:

cell: {
    tools: {
        up: {
            bind: {
                hidden: '{record.bIsHidden}'
            }
        }
    }
}

但是那没有用,实际上,小提琴是关于Modern的,而我的代码是关于classic的。.

我什么也没找到,这就是为什么我在这里恳求任何人帮助我;)

提前谢谢您。

ExtJS Classic 6.5.3

2 个答案:

答案 0 :(得分:2)

您可以这样绑定它:

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="field">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Header</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.field}} </mat-cell>
    </ng-container>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

答案 1 :(得分:2)

您可以使用rowViewModel来按记录绑定窗口小部件列。 Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function () {
        new Ext.grid.Panel({
            renderTo: document.body,
            viewModel: {
                data: {
                    actionTitle: 'Remove'
                }
            },
            store: {
                data: [{
                    name: 'A',
                    hidden: false
                }, {
                    name: 'B',
                    hidden: true
                }]
            },
            rowViewModel: true,
            columns: [{
                dataIndex: 'name',
                text: 'Name'
            }, {
                xtype: 'widgetcolumn',
                widget: {
                    xtype: 'button',
                    bind: {
                        text: '{actionTitle}',
                        hidden: '{record.hidden}'
                    },
                    margin: 5
                },
            }]
        });
    }
});