哈哈哈回家

您好,您可以使用ExtJS 6.2.0中的锁定列(locked column)和锁定视图(locked view)来实现在一个grid中使用两个横向的滚动条分别控制水平方向的滚动。您可以将锁定列放在左侧,非锁定列放在右侧,然后将锁定视图放在非锁定视图的上方。这样,您就可以使用两个横向滚动条分别控制锁定列和非锁定列的水平滚动。

 

以下是一个示例代码片段:

 

```

Ext.create('Ext.grid.Panel', {

    title: 'Two horizontal scrollbars',

    width: 600,

    height: 400,

    renderTo: Ext.getBody(),

    store: store,

    columns: [{

        text: 'Name',

        locked: true,

        dataIndex: 'name'

    }, {

        text: 'Email',

        dataIndex: 'email',

        flex: 1

    }, {

        text: 'Phone',

        dataIndex: 'phone'

    }],

    viewConfig: {

        plugins: {

            ptype: 'gridviewdragdrop',

            dragGroup: 'secondGridDDGroup',

            dropGroup: 'firstGridDDGroup'

        },

        listeners: {

            afterrender: function(view) {

                var lockedView = view.lockedView;

                var normalView = view.normalView;

                lockedView.getEl().on('scroll', function(e, t) {

                    normalView.getEl().dom.scrollLeft = t.scrollLeft;

                });

                normalView.getEl().on('scroll', function(e, t) {

                    lockedView.getEl().dom.scrollLeft = t.scrollLeft;

                });

            }

        }

    }

});

```

 

如果您需要更多关于ExtJS 6.2.0的帮助,请访问[官方文档](https://docs.sencha.com/extjs/6.2.0/)。

 

源: 与必应的对话, 2023/10/17

(1) Grids | Ext JS 6.0.2 - Sencha Documentation. https://docs.sencha.com/extjs/6.0.2/guides/components/grids.html.

(2) how to add horizontal scroll bar to a panel In ExtJs?. https://stackoverflow.com/questions/8414904/how-to-add-horizontal-scroll-bar-to-a-panel-in-extjs.

(3) extjs 3.2 horizonatal scrollbar for grid panel - Stack Overflow. https://stackoverflow.com/questions/38458301/extjs-3-2-horizonatal-scrollbar-for-grid-panel.

(4) grid - ExtJs: Add horizontal scroll bar with out css - Stack Overflow. https://stackoverflow.com/questions/32583206/extjs-add-horizontal-scroll-bar-with-out-css.

(5) Ext.grid.Panel | Ext JS 6.2.0 - Docs. https://docs.sencha.com/extjs/6.2.0/classic/Ext.grid.Panel.html.

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值