Ext JS：为什么ViewPort中的GridPanel没有滚动条？

在ViewPort中面板的简单示例中，由于面板的autoScroll的默认值为false，面板将不会出现文本溢出滚动条。Ext JS：为什么ViewPort中的GridPanel没有滚动条？

这里是一个工作示例：http://jsfiddle.net/rqZ4y/（感谢CD ..）

这里有一个稍微更复杂的例子，设有GridPanel中（已autoScroll默认为true，所以它并不需要明确设定！）

Ext.application({ 
    launch: function() { 
     Ext.create("Ext.Viewport", { 
//   layout: "fit", 
      items: [ 
       { 
        html: "Hello!" 
       }, 
       { 
        xtype: "grid", 
        title: 'Simpsons Contacts', 
        store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [ 
         { text: 'Name', dataIndex: 'name' }, 
         { text: 'Email', dataIndex: 'email', flex: 1 }, 
         { text: 'Phone', dataIndex: 'phone' } 
        ] 
       } 
      ] 
     }); 
    } 
});

工作例如：http://jsfiddle.net/gXsPk/

在这种情况下，电网没有滚动条。

我已禁用layout: "fit"为了让这两个面板显示。如果我指定layout: "fit"那么会导致“你好！”面板占用所有可用空间，并且网格根本不可见。

如果我删除“你好！”面板，并重新引入layout: "fit"选项，然后我得到一个带滚动条的网格！

工作例如：http://jsfiddle.net/VBAyS/

我在做什么错在这里？

我使用Ext JS的4.1.1a

来源

2013-03-11 Daniel Fortunov

为autoScroll默认为false。

将autoScroll: true设置为在组件布局元素上使用overflow:'auto'，并在必要时自动显示滚动条。

工作例如：http://jsfiddle.net/rqZ4y/

编辑：

使用vbox布局应解决您的问题。

我改变了布局：

layout: { type: 'vbox', align: 'stretch' }

接下来，我添加flex: 1到电网。

工作例如：http://jsfiddle.net/gXsPk/1/

来源

2013-03-11 18:27:48

好了，在tihs基本的例子，问题是自动滚动默认为面板上的错误。更新的问题更接近我的实际问题，它涉及一个GridPanel，默认情况下autoScroll为true。 – 2013-03-13 09:49:44

@DanielFortunov：看看我的编辑 – 2013-03-13 10:25:12

Ext JS：为什么ViewPort中的GridPanel没有滚动条？

回答

相关问题