ExtJS Layout, Horizonally sau đó phát triển theo chiều dọc

Question

Tôi có một Ext.panel.Panel mà tôi muốn tự động thêm các bảng "nhỏ" khác đại diện cho "thứ" khác nhau trong ứng dụng của tôi. Bảng này nằm ở trên cùng của lưới và có cùng chiều rộng với lưới. Khi bảng điều khiển "nhỏ hơn" được thêm động vào "bảng điều khiển vùng chứa" này, tôi muốn các ô được thêm theo chiều ngang và chiều dọc nếu tổng chiều rộng của tất cả các ô "nhỏ" lớn hơn chiều rộng của vùng chứa.

Tôi đã thử 'fit', 'hbox', 'vbox', mọi thứ.

Tôi có thiếu loại bố cục không?

Answer 1

Những gì bạn thường được gọi là bố cục flow, mà ExtJS không có trong hộp (nếu bạn hỏi tôi, có một chút ngớ ngẩn không phải vì bố cục rất phổ biến và thực tế là một trong những áp dụng trên hầu hết các ví dụ dataview của họ, nhưng bằng cách sử dụng css chứ không phải là một bố trí).

Nhưng có thể dễ dàng đạt được bằng cách sử dụng bố cục cột không có columnWidth được xác định. Sao chép this answer:

Ext.create('Ext.Panel', { 
     width: 500, 
     height: 280, 
     title: "ColumnLayout Panel", 
     layout: 'column', 
     renderTo: document.body, 
     items: [{ 
      xtype: 'panel', 
      title: 'First Inner Panel', 
      width: 250, 
      height: 90 
     },{ 
      xtype: 'panel', 
      title: 'Second Inner Panel', 
      width: 200, 
      height: 90 
     }, { 
      xtype: 'panel', 
      title: 'Third Inner Panel', 
      width: 150, 
      height: 90 
     }] 
    }); 

Answer 2

tôi thấy rằng khi sử dụng ví dụ trên trong ExtJS 4.2.2 các tấm được xếp chồng lên nhau theo chiều dọc.

tôi cần phải thêm:

style: { 
    float: 'left' 
}, 

cho từng hạng mục và sau đó tất cả hoạt động tốt.

Tôi đã thử nghiệm với cả cấu hình tĩnh (như ví dụ ở trên) và cũng có thêm/xóa động (sử dụng vùng chứa tùy chỉnh cho từng mục con). Bảng điều khiển vùng chứa được hiển thị lại theo kiểu giống như dòng chảy mỗi lần. Cũng chính xác khi thay đổi kích thước cửa sổ trình duyệt - các mục con được di chuyển để phù hợp với kích thước bảng điều khiển mới.

Murray