extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
58 lines (52 loc) • 2.26 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>ForceFit Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<!-- GC -->
<script type="text/javascript" src="../shared/include-ext.js"></script>
<script type="text/javascript" src="../shared/options-toolbar.js"></script>
<!-- page specific -->
<style type="text/css">
/* style rows on mouseover */
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
}
/* custom icon for the "buy" ActionColumn icon */
.x-action-col-cell img.buy-col {
background-image: url(../shared/icons/fam/accept.png);
}
/* custom icon for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
background-image: url(../shared/icons/fam/error.png);
}
.x-ie6 .x-action-col-cell img.buy-col {
background-image: url(../shared/icons/fam/accept.gif);
}
.x-ie6.x-action-col-cell img.alert-col {
background-image: url(../shared/icons/fam/error.gif);
}
.x-ie6 .x-action-col-cell img {
position:relative;
top:-1px;
}
</style>
<script type="text/javascript" src="force-fit-grid.js"></script>
</head>
<body>
<h1>ForceFit Array Grid Example</h1>
<p>This example shows how to use the <code>forceFit</code> config to make columns always fit within the available width.</p>
<p>This also illustrates the <code>reserveScrollbar</code> config which means that space for the scrollbar will <em>always</em>
be reserved even if the grid panel is tall enough that no scrollbar is required.</p>
<p>Note that the js is not minified so it is readable. See <a href="force-fit-grid.js">force-fit-grid.js</a>.</p>
</body>
</html>