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滾動條不出現

回答

相關問題