使用面板创建Autosizeble面板

时间:2010-06-04 14:38:10

标签: asp.net extjs coolite

很抱歉问题标题不是很清楚,但也许图片会有助于描述我的问题:

image http://my.jetscreenshot.com/2951/20100604-ioyo-164kb.jpg

我希望父面板中的小子面板可以自动调整大小。这是我的标记和代码隐藏:

    protected void Page_Load(object sender, EventArgs e)
        {
            var bkg = new[] { "background-color: wheat;", "background-color: gray;", "background-color: #AAAAAA;" };
            var random = new Random();
            for (var i = 0; i < 285; i++)
            {
                var panel = new Panel
                                {
                                    Header = false,
                                    Width = 60,
                                    Height = 30,
                                    BodyStyle = bkg[random.Next(0, 3)],
                                    Frame = false,
                                    StyleSpec = "padding-top: 1px; padding-left: 1px;",
                                    ID = "panel_" + i,
                                    Html = string.Format("<span class='x-unselectable'>{0}</span>", i)
                                };
                var cell = new Cell();
                cell.Items.Add(panel);
                TableLayout1.Cells.Add(cell);
            }

        }

<ext:Panel ID="pnlWorkArea" runat="server" Title="Test">
    <Body>
        <ext:TableLayout ID="TableLayout1" runat="server" Columns="15">
        </ext:TableLayout>
    </Body>
</ext:Panel>

1 个答案:

答案 0 :(得分:1)

如果您希望子面板布置完全填充中心区域,除了计算区域的内部尺寸之外,没有一种简单的方法可以做到这一点,然后为您的子面板指定固定的高度/宽度现在,但根据您的测量。您可以通过处理render事件或覆盖中心区域面板的onRender来执行此操作。

如果行数和列数始终相同,您可以尝试使用%维度,但根据我的经验,浏览器不能保持一致(有时由于从十进制百分比到像素的舍入,可能会出现小的差距)。 / p>