Extjs滚动条不出现

我有一个像这个主题的问题：Extjs how to make the scrollbar appear?，但太多的东西让我感到困惑。Extjs滚动条不出现

只要表格比包含容器更宽，我需要显示一个滚动条。为什么autoScroll：true不起作用？

我会给出三个不同的例子，并结合这个问题。最需要的 - 第一个前任。 1. https://fiddle.sencha.com/#fiddle/j2c

var win = Ext.create("Ext.window.Window", { 
renderTo: Ext.getBody(), 
title: "Window", 
bodyPadding: 5, 
layout: 'anchor', 

items: [{ 
    itemId: "TPMethodContentProvider", 
    xtype: "form", 
    autoScroll: true, 
    layout: 'anchor', 
    anchor: "100%", 

    items: [{ 
     xtype: "container", 
     padding: 5, 
     layout: 'anchor', 
     anchor: "100%", 
     autoScroll: true, 
     items: [{ 
       margin: 5, 
       padding: 5, 
       width: 850, 
       xtype: "container", 
       autoScroll: true, 
       anchor: "100%", 
       layout: 'column', 

       items: [{ 
        columnWidth: 0.7, 
        items: [{ 
         itemId: "S1", 
         margin: 5, 
         xtype: 'textfield', 
         anchor: "95%", 
         fieldLabel: "type:", 
         labelWidth: 140, 
         tabIndex: 0, 
         value: "bd", 

        }], 
        layout: "anchor" 
       }, { 
        columnWidth: 0.3, 
        items: [{ 
         itemId: "S2", 
         margin: 5, 
         xtype: 'textfield', 
         anchor: "95%", 
         fieldLabel: "num:", 
         labelWidth: 140, 
        }], 
        layout: "anchor" 
       }, ] //panel items 
     }] // some container items 
    }] // form items 
}] }); win.show();

没有滚动条。

..fiddle.sencha.com /＃小提琴/ j2f

Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'Form Panel', 
    bodyPadding: '5 5 0', 
    width: 600, 
    items: [{ 
     xtype: 'container', 
     padding: '5', 
     layout: 'anchor', 

fieldDefaults: { 
    labelAlign: 'top', 
    msgTarget: 'side' 
}, 
defaults: { 
    border: false, 
    xtype: 'panel', 
    layout: 'anchor' 
}, 

layout: 'hbox', 
items: [{ 
    items: [{ 
     xtype:'textfield', 
     fieldLabel: 'First Name', 
     anchor: '-5', 
     name: 'first',     
    }] 
}, { 
    items: [{ 
     xtype:'textfield', 
     fieldLabel: 'Last Name', 
     anchor: '100%', 
     name: 'last' 
    }] 
}], 
}], 
}); //Ext.create('Ext.container.Viewport', {});

它的工作原理，直到评论的最后一行Ext.create（'分机。 container.Viewport'，{}）; 如果我删除项目Viewport中的代码观察到相同的行为。

..fiddle.sencha.com /＃小提琴/ j2g ..

Ext.create('Ext.container.Viewport', { 
padding: '5', 

items: [{ 
id: 'mainPanelContainer', 
autoScroll: true, 
xtype: 'container', 
padding: '5', 
layout: 'anchor', 
//width: 600, 

items: [{ //outer container 
    autoScroll: true, 
    xtype: 'container', 
    padding: '5', 
    layout: 'anchor', 
    width: 600, 

    items: [{ 

     xtype: 'container', 
     padding: '5', 
     layout: 'column', 
     items: [{ 
      xtype: 'textfield', 
      fieldLabel: 'text1', 
      name: 'Name1', 
      columnWidth: .3 
     }, { 
      xtype: 'textfield', 
      fieldLabel: 'text2', 
      name: 'Name2', 
      columnWidth: .7 
     }], //container items 
    }], //outer container items 
}, ] //form items 
}, ]});

滚动工作直到宽度：在那个地方600集，但是在评论的地方不起作用。

对不起，对外码在2，3前。一些不方便的代码片段。

来源

2015-03-03 user4624043

如果使用滚动条，则不应使用'anchor'布局。

正如您在fiddle中所看到的，我使用了'fit'布局。如果您使用ExtJS5，我不建议您使用'autoScroll'配置（已弃用），请改为使用'scrollable'。（http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable）

var win = Ext.create("Ext.window.Window", { 
renderTo: Ext.getBody(), 
title: "Window", 
bodyPadding: 5, 
layout: 'fit', 

items: [{ 
    itemId: "TPMethodContentProvider", 
    xtype: "form", 
    layout: 'fit', 
    width: 600, 
    items: [{ 
       margin: 10, 
       padding: 5, 
       xtype: "container", 
       scrollable: 'horizontal', 
       layout: 'hbox', 

       items: [{ 
        itemId: "S1", 
        margin: 5, 
        xtype: 'textfield', 
        fieldLabel: "type:", 
        scrollable: 'horizontal', 
        labelWidth: 140, 
        tabIndex: 0, 
        value: "bd", 
       }, { 
        itemId: "S2", 
        margin: 5, 
        xtype: 'textfield', 
        scrollable: 'horizontal', 
        fieldLabel: "num:", 
        labelWidth: 140, 
      }] //panel items 
     }] // form items 
    }] //win items 
}); 

win.show();

来源

2015-03-03 21:27:43

在＃2（https://fiddle.sencha.com/#fiddle/j3f）和＃3（https://fiddle.sencha.com/#fiddle/j3g） – 2015-03-03 21:51:25

THX同样的事情，但如果我需要锚布局怎么办？为什么滚动在ex2中起锚作用？ – user4624043 2015-03-06 08:58:39

其实，锚布局也可以。在第一个练习，它不工作，因为列布局，取代它与Hbox，它将工作 – 2015-03-06 09:30:35

我改变了布局为自动，这对我来说是诀窍。现在可以添加/删除面板，滚动条会自动显示/隐藏。

var workActivityPanel = new Ext.Panel({ 
     region: 'center', 
     autoScroll: true, 
     layout: { 
      type: 'auto', 
      align: 'stretch' 
     } 
    });

来源

2017-08-09 17:55:01

Extjs滚动条不出现

回答

相关问题