Salesforce apex:panelGroupの使い方のサンプル

環境
Salesforce

構文
複数の子コンポーネントを単一の panelGrid セルに表示できるようにする、
複数の子コンポーネントのコンテナです。<apex:panelGroup> は、
<apex:panelGrid> の子コンポーネントである必要があります。

属性
id ページの他のコンポーネントが panelGrid コンポーネントを参照できるようにする識別子。
layout パネルグループのレイアウトスタイル。
styleClass
panelGroup コンポーネントの表示に使用されるスタイルクラス。

使用例
apexコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<apex:page>
<apex:panelGrid columns="3" id="theGrid">
<apex:outputText value="111" id="tsFirst"/>
<apex:outputText value="222" id="theSecond"/>
<apex:panelGroup id="theGroup">
<apex:outputText value="333" id="theThird"/>
<apex:outputText value="444" id="theFourth"/>
</apex:panelGroup>
</apex:panelGrid>
</apex:page>
<apex:page> <apex:panelGrid columns="3" id="theGrid"> <apex:outputText value="111" id="tsFirst"/> <apex:outputText value="222" id="theSecond"/> <apex:panelGroup id="theGroup"> <apex:outputText value="333" id="theThird"/> <apex:outputText value="444" id="theFourth"/> </apex:panelGroup> </apex:panelGrid> </apex:page>
<apex:page>
    <apex:panelGrid columns="3" id="theGrid">
        <apex:outputText value="111" id="tsFirst"/>
        <apex:outputText value="222" id="theSecond"/>
        <apex:panelGroup id="theGroup">
            <apex:outputText value="333" id="theThird"/>
            <apex:outputText value="444" id="theFourth"/>
        </apex:panelGroup>
    </apex:panelGrid>
</apex:page>

htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<table id="theGrid">
<tbody>
<tr>
<td><span id="tsFirst">テスト1</span></td>
<td><span id="theSecond">テスト2</span></td>
<td><span id="theGroup">
<span id="theThird">テスト3</span>
<span id="theFourth">テスト4</span>
</span></td>
</tr>
</tbody>
</table>
<table id="theGrid"> <tbody> <tr> <td><span id="tsFirst">テスト1</span></td> <td><span id="theSecond">テスト2</span></td> <td><span id="theGroup"> <span id="theThird">テスト3</span> <span id="theFourth">テスト4</span> </span></td> </tr> </tbody> </table>
<table id="theGrid">
    <tbody>
        <tr>
            <td><span id="tsFirst">テスト1</span></td>
            <td><span id="theSecond">テスト2</span></td>
            <td><span id="theGroup">
                    <span id="theThird">テスト3</span>
                    <span id="theFourth">テスト4</span>
                </span></td>
        </tr>
    </tbody>
</table>

 

IT

Posted by arkgame