css - 窗口中的 ExtJS 4 gridpanel 烦人的水平滚动条

Question

我正在这样的窗口中创建一个网格:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email',],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com" },
        { 'name': 'Homer', "email":"home@simpsons.com"  },
        { 'name': 'Marge', "email":"marge@simpsons.com"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create("Ext.window.Window", {
title: 'BlaBla',
closable: true,
modal: true,
width: 800,
height: 460,
layout: 'fit',
items: [
    {
        xtype: 'gridpanel',
        autoScroll: true,
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        title: 'Choose which features you would like to use to create parts.',
        // height: 300,
        columns: {
            items: [
                {
                    header: 'Name',
                    tooltip: 'Name',
                    dataIndex: 'name',
                    flex: 1
                }, 
                {
                    header: 'Email',
                    tooltip: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }
            ]
        }
    },

]
}).show();

生成这样的窗口:

但是，网格面板有一个烦人的水平滚动条，这不是必需的，因为列是合适的。

为什么要创建滚动条，我应该用什么来代替？

Answer 1

这个滚动条是因为窗口的宽度和高度而产生的，而不是因为网格。您请调整窗口的宽度，您会得到想要的结果。我更改了窗口的 width 并且完美地出现了。这是你的 fiddle