xpages - 扩展库应用程序控制中心列宽度或应用程序控制替代

Question

我正在使用扩展库应用程序控件在页面上提供左侧菜单，顶部带有横幅。应用程序控件中禁用了页脚等大多数内容。我真的不在乎它是否符合 oneui，我只想要一个左侧菜单。

我在中心栏中有一个视图。我的问题是中柱不够宽。一些列被截断。有没有办法控制它的宽度？甚至禁用右列？

或者另一个是否有一个自定义控件，就像应用程序控件一样，只有一个左列可以放置菜单控件，而右侧的列可以放置视图？

Answer 1

仅设置中心列的最小宽度。所以它总是扩展到剩下的最大宽度（在浏览器内），这当然受限于用户设备的分辨率。

首先，我在下面粘贴了一个示例，其中仅在满足特定条件时才显示右列。如果您不打算使用它，只需将其完全删除。其次 .lotusColLeft 类控制左列的宽度，您可以减少它以获得更多的中心列宽度。最后，如果您决定为中心列中的内容包装器提供固定宽度，则还需要添加溢出属性以使中心列可滚动。然而，在我看来，最后一个选项不太理想......希望它有所帮助。

自定义控制

<!-- CUSTOM CONTROL -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:applicationLayout id="applicationLayout1">
        <xp:callback facetName="facetMiddle" id="facetMiddle"></xp:callback>
        <xe:this.facets>
            <!-- REMOVE THE ROW BELOW IF THE RIGHT COLUMN IS NEVER USED -->
            <xp:callback facetName="facetRight" id="facetRight" xp:key="RightColumn"></xp:callback>
            <xp:callback facetName="facetLeft" id="facetLeft" xp:key="LeftColumn"></xp:callback>
        </xe:this.facets>
        <xe:this.configuration>
            <xe:oneuiApplication titleBar="false" placeBar="false"
                footer="false" legal="false" productLogo="/logo.gif">
            </xe:oneuiApplication>
        </xe:this.configuration>
    </xe:applicationLayout>
</xp:view>

XPAGE

<!-- XPAGE -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
    <style>
        .lotusColLeft { width:100px }
        /* UNCOMMENT THESE LINES TO SEE THE LAST OPTION IN ACTION
        .hugeWidth { width:2000px }
        .lotusContent { overflow-x: scroll; }
        */
    </style>

    <xc:layout>
        <xp:this.facets>
            <xp:panel xp:key="facetMiddle" styleClass="hugeWidth">MiddlePanel</xp:panel>
            <!-- REMOVE THE ROW BELOW IF THE RIGHT COLUMN IS NEVER USED, OR DEFINE ITS CONDITION -->
            <xp:panel xp:key="facetRight" rendered="#{javascript:viewScope.hasView}">RightPanel</xp:panel>
            <xp:panel xp:key="facetLeft">LeftPanel</xp:panel>
        </xp:this.facets>
    </xc:layout>
</xp:view>