extjs 网格面板上的滚动问题

发布于 2024-11-17 09:54:17 字数 1513 浏览 2 评论 0原文

您好，我的网格滚动出现问题。
这是代码（没有什么奇特或特别的地方）

Ext.define('grid.list',{
    alias:'widget.grid.list',
    extend: 'Ext.grid.Panel',
    title: 'list',
    frame:true,
    width:325,
    store: new axs.dry.cargo.data.store.list,
    queryMode: 'remote',
    style:{
        cursor: 'default'
    },
    viewConfig: {
        autoScroll: true
    },
    features:[Ext.create('Ext.grid.feature.Grouping',{
        groupHeaderTpl: '{name}'
    })],
    columns: [
    {
        text: 'Name',
        flex: true,
        dataIndex: 'name',
        sortable: false
    }
    ],
    initComponent:function(){
        this.on('beforerender',function(){
            this.store.load();
        });
        grid.list.superclass.initComponent.apply(this,arguments)
    }
})

网格看起来不错并且滚动条正在显示，但是在滚动条上 extjs 生成了一个 DIV，它造成了真正的问题。由于该 div，我无法单击滚动条，因为透明的 DIV 位于其上方...这是这个无用的 DIV 的代码

<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>

我听到有人认为该 div 是为“不定式网格”生成的，但是...
你能帮我提供好的解决方案吗（通过选择元素的ID来删除元素不是一个好的解决方案）

PS。当我删除 grid.list 元素的固定宽度时，问题就消失了......但随后它开始显示看起来丑陋的水平滚动条，我只能通过将宽度设置为固定大小来删除它。

PS2。我使用默认的 css 文件，没有特殊的样式或任何东西。

原文

Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)

Ext.define('grid.list',{
    alias:'widget.grid.list',
    extend: 'Ext.grid.Panel',
    title: 'list',
    frame:true,
    width:325,
    store: new axs.dry.cargo.data.store.list,
    queryMode: 'remote',
    style:{
        cursor: 'default'
    },
    viewConfig: {
        autoScroll: true
    },
    features:[Ext.create('Ext.grid.feature.Grouping',{
        groupHeaderTpl: '{name}'
    })],
    columns: [
    {
        text: 'Name',
        flex: true,
        dataIndex: 'name',
        sortable: false
    }
    ],
    initComponent:function(){
        this.on('beforerender',function(){
            this.store.load();
        });
        grid.list.superclass.initComponent.apply(this,arguments)
    }
})

Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV

<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>

I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)

PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.

PS2. I'm using the default css files and no special styles or anything.

分享到QQ

分享到微博