Extjs làm thế nào để làm cho thanh cuộn xuất hiện?

Question

Tôi cần hiển thị thanh cuộn ngay khi biểu mẫu rộng hơn sau đó chứa vùng chứa. Tôi đặt thuộc tính autoScroll: true trên vùng chứa, nhưng nó không hoạt động. Có anyway để có được kết quả tôi cần?

Dưới đây là ví dụ làm việc

http://jsfiddle.net/mQC3B/2/

Mã

Ext.create('Ext.container.Viewport', { 

    layout: { 
     header: false, 
     type: 'border', 
     padding: 0 
    }, 
    items: [{ 
      region: 'north', 
      padding: '0 150 0 150', 
      height: 36, 
      html: 'header' 
     }, { 
      id:'mainPanelContainer', 
      autoScroll: true, 
      padding: '0 150 0 150', 
      region: 'center', 
      items:[ 
       { 
        xtype:'form', 
        items:[{ 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          anchor: '95%', 
          xtype: 'htmleditor', 
          fieldLabel: 'Popis', 
          name: 'Description', 
          height: 240, 
          width: 450 
         }] 
        }, { 
         xtype: 'container', 
         flex: 1, 
         layout: 'anchor', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }, { 
          xtype: 'container', 
          margin: '0 0 8 0', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }, { 
           xtype: 'textfield', 
           fieldLabel: 'Name', 
           name: 'Name' 
          }] 
         }, { 
          xtype: 'textfield', 
          fieldLabel: 'Name', 
          name: 'Name' 
         }] 
        }] 
       } 
      ] 
     }, { 
      region: 'south', 
      height: 25, 
      padding: '0 150 0 150', 
      html: 'Copyright © 2013' 
     }] 
}); 

EDIT

Sau khi thêm layout: 'phù hợp' để mainPanelContainer thanh cuộn xuất hiện, nhưng nó không phải có thể cuộn đến bên phải ẩn của biểu mẫu.

http://jsfiddle.net/mQC3B/3/

Answer 1

Trong fiddle của bạn để chỉnh sửa của bạn, thay đổi:

padding: '0 150 0 150', 

trong khu vực trung tâm để:

margin: '0 150 0 150', 

Tin hay không, ExtJS bố trí không xử lý tài sản đệm rất tốt. Tôi đã chạy vào điều này trước khi bố trí của tôi. Nó trông giống như trong ví dụ của bạn, lợi nhuận sẽ làm việc để đạt được những gì bạn muốn. Một cách khác để đạt được kết quả tương tự là lồng sâu một cấp khác với bố cục đường viền và thêm các vùng phía đông và phía tây với khoảng trống để bắt chước hành vi của phần đệm.

Answer 2

autoScroll: true là cách để làm điều đó, nhưng bạn sẽ cần phải có tất cả của bố cục chính xác cho nó hoạt động. Thử đặt layout: 'fit' vào số mainPanelContainer và/hoặc form của bạn.

Answer 3

nếu bạn xóa biểu mẫu lồng nhau và chỉ đặt đệm trên vùng chứa tổng thể (chế độ xem trong ví dụ này) có vẻ như giúp bạn hiểu được những gì bạn đang theo dõi từ những gì tôi hiểu.

http://jsfiddle.net/mQC3B/15/

Ext.create('Ext.container.Viewport', { 

    padding: '0 150 0 150', 

    layout: { 
     header: false, 
     type: 'border' 
    }, 
    items: [{ 
     region: 'north', 
     height: 36, 
     html: 'header' 
    }, { 
     id: 'mainPanelContainer', 
     autoScroll: true, 
     region: 'center', 
     xtype: 'form', 
     items: [{ 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       anchor: '95%', 
       xtype: 'htmleditor', 
       fieldLabel: 'Popis', 
       name: 'Description', 
       height: 240, 
       width: 450 
      }] 
     }, { 
      xtype: 'container', 
      flex: 1, 
      layout: 'anchor', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }, { 
       xtype: 'container', 
       margin: '0 0 8 0', 
       layout: 'hbox', 
       items: [{ 
        xtype: 'textfield', 
        fieldLabel: 'Names', 
        name: 'Name' 
       }, { 
        xtype: 'textfield', 
        fieldLabel: 'Name', 
        name: 'Name' 
       }] 
      }, { 
       xtype: 'textfield', 
       fieldLabel: 'Name', 
       name: 'Name' 
      }] 
     }] 
    }, { 
     region: 'south', 
     height: 25, 
     html: 'Copyright © 2013' 
    }] 
}); 

Answer 4

Về cơ bản bạn chỉ cần thêm thuộc tính AutoScroll như:

autoScroll: true