代码之家  ›  专栏  ›  技术社区  ›  Vikas Hire

如何从extjs网格中删除列?

  •  1
  • Vikas Hire  · 技术社区  · 6 年前

    我需要在用户登录的情况下删除一些列。我已经创建了一个包含一些列的网格。当用户登录时,我需要删除用户名和密码列,并希望在管理员用户登录时显示它。所以用户无法在这些列中看到用户名和密码。只有管理员才能看到这些列。 我在用户登录时使用了hidden config,如 hidden:true ,但用户可以使用网格的内部工具将其取消隐藏。所以,我想在用户登录时从网格中完全删除这些列。 您可以看到下面是我的示例extjs代码。我在sencha/extjs文档中没有找到任何配置来完全删除这些列的使用条件。请给我这个问题的解决办法。我怎样才能这样做。

    ext.define('fleet.view.vehicleList','{
    extend:'ext.grid.panel',
    initcomponent:函数()。{
    
    ext.apply(这个,{
    布局:“适合”,
    列:[ {
    header:'车辆ID',
    dataindex:'车辆ID',
    Flex:1
    },{
    标题:“车辆编号”,
    dataindex:'车辆',
    Flex:1
    },{
    header:'用户名',
    dataindex:'用户名',
    Flex:1,
    隐藏:this.isadmin==true?假:真
    },{
    header:'密码',
    dataindex:'密码',
    Flex:1,
    隐藏:this.isadmin==true?假:真
    }
    (});
    this.callParent();
    }
    (});
    < /代码> 
    
    

    下图显示了当我与用户登录时,这将获得隐藏列,但即使用户也可以通过使用网格内部工具显示/隐藏列来显示它。

    .hidden : true在用户登录时,但用户可以使用网格的内部工具将其取消隐藏。所以,我想在用户登录时从网格中完全删除这些列。 您可以看到下面是我的示例extjs代码。我在sencha/extjs文档中没有找到任何配置来完全删除这些列的使用条件。请给我这个问题的解决办法。我怎么能那样做呢?

    Ext.define('fleet.view.Vehiclelist', {
        extend: 'Ext.grid.Panel',
        initComponent: function () {
    
            Ext.apply(this, {
                layout: 'fit',
                columns: [{
                    header: 'Vehicle Id',
                    dataIndex: 'vehicleId',
                    flex: 1
                }, {
                    header: 'Vehicle No',
                    dataIndex: 'vehicleNo',
                    flex: 1
                },{
                    header: 'Username',
                    dataIndex: 'username',
                    flex: 1,
                    hidden: this.isAdmin == true ? false : true
                }, {
                    header: 'Password',
                    dataIndex: 'password',
                    flex: 1,
                    hidden: this.isAdmin == true ? false : true
                }]
            });
            this.callParent();
        }
    });
    

    下图显示了当我和用户登录时,这会得到隐藏列,但即使用户也可以使用网格内部工具显示/隐藏列。

    1 回复  |  直到 6 年前
        1
  •  1
  •   halfer    6 年前

    而不是 hiding 您可以在中添加动态列 initComponent 方法。如果用户类型为 admin 然后添加到列中,否则不做任何操作。

    在这 Fiddle ,我使用简单的登录创建了一个演示 window grid .

    代码片段

    Ext.application({
        name: 'Fiddle',
    
        launch: function () {
    
            Ext.define('Vehiclelist', {
                extend: 'Ext.grid.Panel',
                xtype:'vehiclelist',
                initComponent: function () {
                    let columns = [{
                        header: 'Vehicle Id',
                        dataIndex: 'vehicleId',
                        flex: 1
                    }, {
                        header: 'Vehicle No',
                        dataIndex: 'vehicleNo',
                        flex: 1
                    }];
                    if (this.isAdmin) {
                        columns.push({
                            header: 'Username',
                            dataIndex: 'username',
                            flex: 1
                        }, {
                            header: 'Password',
                            dataIndex: 'password',
                            flex: 1
                        });
                    }
                    Ext.apply(this, {
                        layout: 'fit',
                        columns: columns
                    });
                    this.callParent();
                }
            });
    
            Ext.create('Ext.window.Window', {
                title: 'Login',
                width: 350,
                layout: 'vbox',
                closable: false,
                draggable: false,
                resizable: false,
                bodyPadding: 10,
                defaults: {
                    xtype: 'textfield',
                    labelAlign: 'top',
                    width: '100%'
                },
                items: [{
                    fieldLabel: 'Username'
                }, {
                    fieldLabel: 'Password',
                    inputType: 'password'
                }],
                bbar: ['->', {
                    text: 'Login',
                    handler: function (btn) {
                        Ext.destroy(btn.up('window'));
                        Ext.create({
                            xtype:'vehiclelist',
                            title:'With username and password',
                            renderTo:Ext.getBody(),
                            isAdmin:true
                        });
    
                        Ext.create({
                            xtype:'vehiclelist',
                            margin:'20 0',
                            title:'Without username and password',
                            renderTo:Ext.getBody(),
                            isAdmin:false
                        });
                    }
                }]
            }).show();
        }
    });