创建带有内部面板的 Autosizeble 面板答案

【问题标题】：Create Autosizeble panel with panels inside创建带有内部面板的 Autosizeble 面板
【发布时间】：2010-06-04 14:38:10
【问题描述】：

对不起，问题的标题不是很清楚，但也许图片将有助于描述我的问题：

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>

【问题讨论】：

标签： asp.net extjs coolite

【解决方案1】：

如果您的意思是希望子面板排列完全填充中心区域，除了计算区域的内部尺寸，然后为子面板分配固定的高度/宽度之外，没有简单的方法可以做到这一点现在是，但基于您的测量结果。您可以通过处理render 事件或覆盖中心区域面板的onRender 来做到这一点。

如果行数和列数始终相同，您可以尝试使用 % 维度，但根据我的经验，这在不同浏览器中无法始终如一地工作（有时由于从小数百分比四舍五入到像素，您可能会出现小间隙）。

【讨论】：