Cửa sổ JS tự động mở rộng dựa trên nội dung, tối đa

Question

Sử dụng Ext JS 4.0.2, tôi đang cố mở một cửa sổ tự động kích thước đủ lớn để vừa với nội dung của nó, cho đến khi đạt đến giới hạn chiều cao mà điểm nó dừng lại nhận được lớn hơn và cho thấy một thanh cuộn.

Đây là những gì tôi đang làm

Ext.create('widget.window', { 
    maxHeight: 300, 
    width: 250, 
    html: someReallyBigContent, 
    autoScroll: true, 
    autoShow: true 
}); 

Khi cửa sổ được render đầu tiên, nó có kích thước lớn đủ về nội dung thực sự lớn - lớn hơn maxHeight nên cho phép. Nếu tôi cố gắng thay đổi kích thước của nó, sau đó snaps xuống đến maxHeight của 300px.

Làm cách nào để hạn chế cửa sổ ở mức tối đa khi cửa sổ được hiển thị ban đầu?

Answer 1

tôi có chính xác cùng một vấn đề và bây giờ tôi đang làm một bẩn hack litle :)

this.on('afterrender', function() { 
    if (this.getHeight() > this.maxHeight) { 
     this.setHeight(this.maxHeight); 
    } 
    this.center(); 
}, this); 

Tùy thuộc vào nội dung của cửa sổ, bạn phải sử dụng sự kiện afterlayout. Thay vì sử dụng this.maxHeight, để sử dụng toàn bộ chế độ xem, hãy sử dụng Ext.getBody().getViewSize().height hoặc sử dụng vanilla JS window.innerHeight.

Phiên bản này sẽ làm việc ngay cả khi cửa sổ chứa các thành phần khác và không html chỉ khổng lồ:

listeners: {afterlayout: function() { 
    var height = Ext.getBody().getViewSize().height; 
    if (this.getHeight() > height) { 
     this.setHeight(height); 
    } 
    this.center(); 
}} 

Answer 2

Bạn có thể thêm cấu hình này trên cửa sổ của bạn

maximizable: true 

nếu bạn muốn, bạn có thể lập trình nghe tiếng 'click' nút đó :)

Answer 3

Bây giờ tôi thấy những gì bạn đang cố gắng làm. Tôi nghĩ rằng điều duy nhất còn thiếu trong cấu hình của bạn là tham số chiều cao. Đặt nó với cùng một số như maxheight. Điều đó nên làm điều đó, bạn sẽ không cần phải gọi setHeight().

Answer 4

Tôi không thấy một cách out-of-the-box để làm điều này. Tuy nhiên, bạn có thể thử phương pháp này:

Đặt nội dung của cửa sổ vào một thùng chứa bên trong cửa sổ (ví dụ: làm cho someReallyBigContent ở trong một vùng chứa.) Trên afterrender, lấy chiều cao của thùng chứa bên trong đó rồi tiến hành đặt chiều cao của cửa sổ bên ngoài dựa trên đó.

Answer 5

Làm thế nào tôi đã kết thúc hiển thị một cửa sổ với một số tiền không rõ của các lĩnh vực trên một hình thức (hạn chế = body.el):

prefForm.itemId = 'prefForm'; 
win = Ext.create('Ext.window.Window', { 
    layout : { 
     type : 'vbox', 
     align : 'center' 
    }, 
    buttons : buttons, 
    maxHeight : constrain.dom.clientHeight - 50, 
    title : title, 
    items : prefForm, 
    listeners : { 
     afterrender : { 
      fn : function(win) { 
       var f = win.down('#prefForm'); 
       f.doLayout(); 
       var h = f.body.dom.scrollHeight; 
       if (f.getHeight() > h) 
        h = f.getHeight(); 
       win.setHeight(h + 61); 
       win.center(); 
      }, 
      single : true 
     } 
    } 
}); 

Answer 6

Đây là giống như Ivan Novakov câu trả lời, ngoại trừ tôi thích nó khi bạn ghi đè lên lớp onRender cho các kiểu lớp này.

Đây là vì một vài lý do. Xóa một trình xử lý sự kiện bổ sung và trong trường hợp bạn có nhiều thứ cần phải xảy ra vào thời gian sau đó. Bạn có thể kiểm soát đồng bộ hóa các tác vụ này.

onRender: function(ct,pos) { 
    //Call superclass 
    this.callParent(arguments); 
    if (this.getHeight() > this.maxHeight) { 
     this.setHeight(this.maxHeight); 
    } 
    this.center(); 
} 

Answer 7

Tôi gặp vấn đề khác đôi chút. Trong trường hợp của tôi ExtJS mã có bên trong các cửa sổ popup HTML. Và tôi phải đạt được:
thay đổi kích thước của bảng điều khiển khi chúng tôi thay đổi kích thước của cửa sổ bật lên. Giải pháp của Ivan Novakov làm việc cho tôi.

Ext.EventManager.onWindowResize(function() { 

     var width = Ext.getBody().getViewSize().width - 20; 
     var height = Ext.getBody().getViewSize().height - 20; 
     myPanel.setSize(width, height); 

}); 

Answer 8

Điều này có thể tốt hơn:

bodyStyle: { maxHeight: '100px' }, autoScroll: true,