Ext Grid 너비 적응성
2405 단어 grid
그러면 우리는 윈도우를 등록할 수 있다.onresize 함수는 상응하는 것을 진행한다.그러나 사용자가 브라우저의 폭을 매우 작게 당기면 잘 보이지 않을 수 있기 때문에 우리는 열의 내용이 대충 잘 보일 수 있도록 최소 폭을 설정할 수 있다.브라우저가 이 너비보다 작으면 Grid가 가장 작고 수평 스크롤 바가 나타납니다.
페이지 레이아웃은 다음과 같습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var __path = '<%=path%>';
Ext.BLANK_IMAGE_URL = __path + '/styles/images/s.gif';
</script>
<script type="text/javascript" src="<%=path%>/test.js"></script>
<title></title>
</head>
<body>
<div id="grid-div">
<div id="grid"></div>
</div>
</body>
</html>코드는 다음과 같습니다.
Ext.onReady(function() {
//
//...
//
window.onresize=resizeWindowListener;
});
function resizeWindowListener() {
var grid = Ext.getCmp("grid");
//
var columns = grid.getColumnModel().getColumnCount(true);
grid.setWidth(0);
// ，
if (Ext.get("grid-div").getWidth() > columns * 80) {
// grid grid
grid.setWidth(Ext.get("grid-div").getWidth());
}
else
{
// *80
grid.setWidth(columns * 80);
}
}
// ：
// ,
Ext.EventManager.onWindowResize(function(width,height)
{
var sidWidth = grid.getColumnModel().getColumnCount(true)*100;
grid.setWidth(sidWidth);
if(Ext.get("grid-div").getWidth()>sidWidth)
{
grid.setWidth(Ext.get("grid-div").getWidth());
}
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CSS 그리드로 2차원 레이아웃 구축이 기사를 쓰기 전에 나는 1D 레이아웃을 행 또는 열로 만들고 더 구체적으로 다음과 같이 그리드 내부의 요소에 고정 크기를 제공하기 위해 CSS Grid를 사용했습니다. 한 번에 훌륭한 2D 레이아웃을 만드는 데 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
