これらは次のようなコンポーネントです。
- ％ZEN.Component.accordionMenu
- ％ZEN.Component.toolbar
- ％ZEN.Component.navigator
- ％ZEN.Component.lookup
- ％ZEN.Component.dataGrid
クラスディレクトリには、これらのコンポーネントのすべてのドキュメントがあります。 ここでは、その使用例の紹介例も（スクリーンショットと共に）見つけることができます。
例＃1：<accordionMenu>
このコンポーネントは、レベルの最大数が3に等しい特別なメニューです。
この例では2つのコンポーネントを使用します。1つはクライアントからデータを受信し、もう1つはサーバーからデータを受信します。
<accordionMenu>のサンプルコード
クラスhtml5.test1 Extends％ZEN.Component.page
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup cellVAlign = "top" >
<！-サーバーからデータを受信する->
< accordionMenu controllerId = "json" onselect = "zenPage.selectList（key、action、targetId）;" selectedIndex = "2" />
<！-クライアントからデータを受信する->
< accordionMenu ongetdata = "return zenPage.getdata（）;" onselect = "zenPage.selectList（key、action、targetId）;" />
</ hgroup >
</ ページ >
}
ClientMethod getdata （）[ 言語 = javascript]
{
return {children：[{key： 'key0' 、
キャプション： 'caption0' 、
アクション： 'action0' 、
targetId： 'id0' 、
画像： 'deepsee / add_64.png' 、
imageStyle： 'border：1px赤一色;' 、
スタイル： '背景：赤;' 、
子：[{key： 'key01' 、
キャプション： 'caption01' 、
アクション： 'action01' 、
targetId： 'id01' 、
画像： 'images / save.png' }]
}]
};
}
メソッド SrvGetData（
ByRef pParameters 、
出力 pMetaData 、
出力 pData ） As％Status
{
pMetaData = $ LB （ "key" 、 "caption" 、 "action" 、 "targetId" 、 "image" 、 "imageStyle" 、 "style" ）を設定します
Set pData （1）= $ LB （ "key1" 、 "caption1" 、 "action1" 、 " id1" 、 "" ）
Set pData （1,1）= $ LB （ "key11" 、 "caption11" 、 "action11" 、 "id11" 、 "images / saveas.png" ）
Set pData （1,1,1）= $ LB （ "key111" 、 "caption111" 、 "action111" 、 "id111" 、 "deepsee / cancel_48.png" ）
Set pData （ 1,1,2 ）= $ LB （ "key112" 、 "caption112" 、 "action112" 、 "id112" 、 "deepsee / cancel_48.png" ）
Set pData （2）= $ LB （ "key2" 、 "caption2" 、 "action2" 、 "id2" 、 "images / save.png" 、 "border-radius：10px;" ）
Set pData （2,1）= $ LB （ "key21" 、 "caption21" 、 "action21" 、 "id21" 、 "images / saveall.png" ）
Set pData （2,1,1）= $ LB （ "key211" 、 "caption211" 、 "action211" 、 "id211" 、 "deepsee / ds2_list_44.png" ）
Set pData （2,1,2）= $ LB （ "key212" 、 "caption212" 、 "action212" 、 "id212" 、 "deepsee / ds2_list_44.png" ）
Set pData （3）= $ LB （ "key3" 、 "caption3" 、 "action3" 、 "id3" 、 "" ）
Set pData （3,1）= $ LB （ "key31" 、 "caption31" 、 "action31" 、 "id31" 、 "images / saveall.png" ）
Set pData （3,1,1）= $ LB （ "key311" 、 "caption311" 、 "action311" 、 "id311" 、 "deepsee / add_64.png" 、 "border：1px solid white;" ）
Set pData （3,1,2）= $ LB （ "key312" 、 "caption312" 、 "action312" 、 "id312" 、 "deepsee / add_64.png" ,, "background：blue;" ）
$$$ OKを終了OK
}
ClientMethod selectList（
鍵
行動
targetId ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ naction =' 、action、 '\ ntargetId =' 、targetId）;
}
}
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup cellVAlign = "top" >
<！-サーバーからデータを受信する->
< accordionMenu controllerId = "json" onselect = "zenPage.selectList（key、action、targetId）;" selectedIndex = "2" />
<！-クライアントからデータを受信する->
< accordionMenu ongetdata = "return zenPage.getdata（）;" onselect = "zenPage.selectList（key、action、targetId）;" />
</ hgroup >
</ ページ >
}
ClientMethod getdata （）[ 言語 = javascript]
{
return {children：[{key： 'key0' 、
キャプション： 'caption0' 、
アクション： 'action0' 、
targetId： 'id0' 、
画像： 'deepsee / add_64.png' 、
imageStyle： 'border：1px赤一色;' 、
スタイル： '背景：赤;' 、
子：[{key： 'key01' 、
キャプション： 'caption01' 、
アクション： 'action01' 、
targetId： 'id01' 、
画像： 'images / save.png' }]
}]
};
}
メソッド SrvGetData（
ByRef pParameters 、
出力 pMetaData 、
出力 pData ） As％Status
{
pMetaData = $ LB （ "key" 、 "caption" 、 "action" 、 "targetId" 、 "image" 、 "imageStyle" 、 "style" ）を設定します
Set pData （1）= $ LB （ "key1" 、 "caption1" 、 "action1" 、 " id1" 、 "" ）
Set pData （1,1）= $ LB （ "key11" 、 "caption11" 、 "action11" 、 "id11" 、 "images / saveas.png" ）
Set pData （1,1,1）= $ LB （ "key111" 、 "caption111" 、 "action111" 、 "id111" 、 "deepsee / cancel_48.png" ）
Set pData （ 1,1,2 ）= $ LB （ "key112" 、 "caption112" 、 "action112" 、 "id112" 、 "deepsee / cancel_48.png" ）
Set pData （2）= $ LB （ "key2" 、 "caption2" 、 "action2" 、 "id2" 、 "images / save.png" 、 "border-radius：10px;" ）
Set pData （2,1）= $ LB （ "key21" 、 "caption21" 、 "action21" 、 "id21" 、 "images / saveall.png" ）
Set pData （2,1,1）= $ LB （ "key211" 、 "caption211" 、 "action211" 、 "id211" 、 "deepsee / ds2_list_44.png" ）
Set pData （2,1,2）= $ LB （ "key212" 、 "caption212" 、 "action212" 、 "id212" 、 "deepsee / ds2_list_44.png" ）
Set pData （3）= $ LB （ "key3" 、 "caption3" 、 "action3" 、 "id3" 、 "" ）
Set pData （3,1）= $ LB （ "key31" 、 "caption31" 、 "action31" 、 "id31" 、 "images / saveall.png" ）
Set pData （3,1,1）= $ LB （ "key311" 、 "caption311" 、 "action311" 、 "id311" 、 "deepsee / add_64.png" 、 "border：1px solid white;" ）
Set pData （3,1,2）= $ LB （ "key312" 、 "caption312" 、 "action312" 、 "id312" 、 "deepsee / add_64.png" ,, "background：blue;" ）
$$$ OKを終了OK
}
ClientMethod selectList（
鍵
行動
targetId ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ naction =' 、action、 '\ ntargetId =' 、targetId）;
}
}
スクリーンショット<accordionMenu> 
番号1
番号2
番号3
番号1
番号2
番号3
例2：<ツールバー>
このコンポーネントは、さまざまなタイプのサブアイテムをサポートするメニューのサブセットです。
この例では2つのコンポーネントを使用します。1つは最も単純なケースで、もう1つはより高度で、一部の組み込みスタイルをオーバーライドします。
<toolbar>のサンプルコード
クラスhtml5.test2 Extends％ZEN.Component.page
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
.ztb-caption-1 {
フォントサイズ：12px;
パディング：4px 10px 4px 10px;
}
.ztb-menuItemSelected-1 {
背景：白;
境界線：1pxソリッド;
border-top-left-radius：10px;
border-top-right-radius：10px;
}
td.ztb-choiceSelected {
背景：白;
色：黒;
不透明度：1.0;
フォントサイズ：12px;
}
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ツールバー
ongetdata = "return zenPage.getdata1（）;"
onselect = "zenPage.selectList（key、action、targetId）;"
/>
< スペーサーの 高さ = "10" />
< ツールバー
ongetdata = "return zenPage.getdata2（）;"
onselect = "zenPage.selectList（key、action、targetId）;"
onchange = "zenPage.change（key、value、final）;"
onpagechange = "zenPage.pagechange（キー、ページ）;"
/>
</ ページ >
}
ClientMethod pagechange（
鍵
page ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ npage =' 、page）;
}
ClientMethodの 変更（
鍵
価値
final ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nfinal =' 、final）;
}
ClientMethod selectList（
鍵
行動
targetId ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ n action =' 、action、 '\ ntargetId =' 、targetId）;
}
ClientMethod getdata1（）[ 言語 = javascript]
{
return {children：[{key： 'key1' 、
キャプション： 'caption1' 、
アクション： 'action1' 、
targetId： 'id1' 、
画像： '' 、
子：[{key： 'key11' 、
キャプション： 'caption11' 、
アクション： 'action11' 、
targetId： 'id11' 、
画像： 'images / save.png' }]
}、
{key： 'key2' 、
キャプション： 'caption2' 、
アクション： 'action2' 、
targetId： 'id2' 、
画像： 'deepsee / add_64.png' 、
子：[{key： 'key21' 、
キャプション： 'caption21' 、
アクション： 'action21' 、
targetId： 'id21' 、
画像： 'images / save.png' }]
}、
{key： 'key3' 、
キャプション： 'caption3' 、
アクション： 'action3' 、
targetId： 'id3' 、
画像： 'deepsee / ds2_list_44.png' 、
子：[{key： 'key31' 、
キャプション： 'caption31' 、
アクション： 'action31' 、
targetId： 'id31' 、
画像： 'images / save.png' }]
}]
};
}
ClientMethod getdata2（）[ 言語 = javascript]
{
return {
子供：[
{key： ' key1 ' 、キャプション： 'caption1' 、action： 'action1' 、targetId： 'id1' 、image： '' 、type： 'pages' 、minValue： 1 、maxValue： 5 }、
{key： 'key2' 、キャプション： 'caption2' 、action： 'action2' 、targetId： 'id2' 、image： 'deepsee / cancel_48.png' 、type： 'tab' }、
{key： 'key3' 、キャプション： 'caption3' 、action： 'action3' 、targetId： 'id3' 、image： '' 、type： 'tab' }、
{key： 'key4' 、キャプション： 'caption4' 、action： 'action4' 、targetId： 'id4' 、image： '' 、type： 'item' 、
子：[{key： 'key41' 、キャプション： 'caption41' 、アクション： 'action41' 、targetId： 'id41' 、画像： '' }、
{セパレータ： '' }、
{key： 'key42' 、キャプション： 'caption42' 、action： 'action42' 、targetId： 'id42' 、image： '' }]}、
{タイプ： 'スペーサー' 、スタイル： '幅：50ピクセル;' }、
{key： 'key5' 、キャプション： 'caption5' 、action： 'action5' 、targetId： 'id5' 、image： 'images / save.png' 、type： 'tab' 、selected：true}、
{key： 'key6' 、キャプション： 'caption6' 、アクション： 'action6' 、targetId： 'id6' 、画像： '' 、タイプ： 'choice' 、displayList： 'a1、b1、c1' 、valueList： 'a 、b、c ' 、値： ' c ' 、スタイル： '幅：90px; ' }、
{key： 'key7' 、キャプション： 'caption7' 、action： 'action7' 、targetId： 'id7' 、image： '' 、type： 'field' 、value： 'field' }、
{key： 'key8' 、キャプション： 'caption8' 、action： 'action8' 、targetId： 'id8' 、image： '' 、type： 'string' 、defaultValue： 'defaultValue' }、
{key： 'key9' 、キャプション： 'caption9' 、action： 'action9' 、targetId： 'id9' 、image： '' 、type： 'message' }
]
};
}
}
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
.ztb-caption-1 {
フォントサイズ：12px;
パディング：4px 10px 4px 10px;
}
.ztb-menuItemSelected-1 {
背景：白;
境界線：1pxソリッド;
border-top-left-radius：10px;
border-top-right-radius：10px;
}
td.ztb-choiceSelected {
背景：白;
色：黒;
不透明度：1.0;
フォントサイズ：12px;
}
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ツールバー
ongetdata = "return zenPage.getdata1（）;"
onselect = "zenPage.selectList（key、action、targetId）;"
/>
< スペーサーの 高さ = "10" />
< ツールバー
ongetdata = "return zenPage.getdata2（）;"
onselect = "zenPage.selectList（key、action、targetId）;"
onchange = "zenPage.change（key、value、final）;"
onpagechange = "zenPage.pagechange（キー、ページ）;"
/>
</ ページ >
}
ClientMethod pagechange（
鍵
page ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ npage =' 、page）;
}
ClientMethodの 変更（
鍵
価値
final ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nfinal =' 、final）;
}
ClientMethod selectList（
鍵
行動
targetId ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key、 '\ n action =' 、action、 '\ ntargetId =' 、targetId）;
}
ClientMethod getdata1（）[ 言語 = javascript]
{
return {children：[{key： 'key1' 、
キャプション： 'caption1' 、
アクション： 'action1' 、
targetId： 'id1' 、
画像： '' 、
子：[{key： 'key11' 、
キャプション： 'caption11' 、
アクション： 'action11' 、
targetId： 'id11' 、
画像： 'images / save.png' }]
}、
{key： 'key2' 、
キャプション： 'caption2' 、
アクション： 'action2' 、
targetId： 'id2' 、
画像： 'deepsee / add_64.png' 、
子：[{key： 'key21' 、
キャプション： 'caption21' 、
アクション： 'action21' 、
targetId： 'id21' 、
画像： 'images / save.png' }]
}、
{key： 'key3' 、
キャプション： 'caption3' 、
アクション： 'action3' 、
targetId： 'id3' 、
画像： 'deepsee / ds2_list_44.png' 、
子：[{key： 'key31' 、
キャプション： 'caption31' 、
アクション： 'action31' 、
targetId： 'id31' 、
画像： 'images / save.png' }]
}]
};
}
ClientMethod getdata2（）[ 言語 = javascript]
{
return {
子供：[
{key： ' key1 ' 、キャプション： 'caption1' 、action： 'action1' 、targetId： 'id1' 、image： '' 、type： 'pages' 、minValue： 1 、maxValue： 5 }、
{key： 'key2' 、キャプション： 'caption2' 、action： 'action2' 、targetId： 'id2' 、image： 'deepsee / cancel_48.png' 、type： 'tab' }、
{key： 'key3' 、キャプション： 'caption3' 、action： 'action3' 、targetId： 'id3' 、image： '' 、type： 'tab' }、
{key： 'key4' 、キャプション： 'caption4' 、action： 'action4' 、targetId： 'id4' 、image： '' 、type： 'item' 、
子：[{key： 'key41' 、キャプション： 'caption41' 、アクション： 'action41' 、targetId： 'id41' 、画像： '' }、
{セパレータ： '' }、
{key： 'key42' 、キャプション： 'caption42' 、action： 'action42' 、targetId： 'id42' 、image： '' }]}、
{タイプ： 'スペーサー' 、スタイル： '幅：50ピクセル;' }、
{key： 'key5' 、キャプション： 'caption5' 、action： 'action5' 、targetId： 'id5' 、image： 'images / save.png' 、type： 'tab' 、selected：true}、
{key： 'key6' 、キャプション： 'caption6' 、アクション： 'action6' 、targetId： 'id6' 、画像： '' 、タイプ： 'choice' 、displayList： 'a1、b1、c1' 、valueList： 'a 、b、c ' 、値： ' c ' 、スタイル： '幅：90px; ' }、
{key： 'key7' 、キャプション： 'caption7' 、action： 'action7' 、targetId： 'id7' 、image： '' 、type： 'field' 、value： 'field' }、
{key： 'key8' 、キャプション： 'caption8' 、action： 'action8' 、targetId： 'id8' 、image： '' 、type： 'string' 、defaultValue： 'defaultValue' }、
{key： 'key9' 、キャプション： 'caption9' 、action： 'action9' 、targetId： 'id9' 、image： '' 、type： 'message' }
]
};
}
}
スクリーンショット<ツールバー> 
番号1
番号2
番号1
番号2
例3：<ナビゲーター>
このコンポーネントは、モバイルデバイス用に調整された豊富なインターフェイスを提供します。各メニュー項目は、このタイプに固有のカスタムパラメータを持つ特定のタイプによって制御されます。
組み込み型が十分でない場合、独自のhtmlをサブパラグラフに挿入することができます。
一部のタイプの要素では、次のレベルに移行することができます。次のレベルには独自のメニュー項目が含まれる場合があります。 ドリルタイプの移行の入れ子の深さには制限がありません。
各レベルには、独自のヘッダーとフッターがあります。
メニュー項目は、ドラッグアンドドロップを使用して移動できます。 色とフォントを選択するための既製の方法があります。
さらに、フィンガーコントロールのイベントハンドラーも利用できます。
<navigator>のサンプルコード
クラスhtml5.test3 Extends％ZEN.Component.page
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ナビゲーター
id = "ナビゲーター"
footerHeight = "40"
showDisclosure = "true"
expanded = "true"
ongetcontent = "zenPage.getContent（レベル、キー、値）を返す;"
onselect = "zenPage.selectItem（key、value、which）;"
onchange = "zenPage.dataChange（key、value、final）;"
onbuttonclick = "zenPage.buttonClick（key）;"
onclosebuttonclick = "zenPage.closeButtonClick（key）;"
/>
</ ページ >
}
ClientMethod buttonClick（ key ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key）;
}
ClientMethod closeButtonClick（ key ）[ 言語 = javascript]
{
zenAlert（ '（closebutton）key =' 、key）;
}
ClientMethod dataChange（
鍵
価値
final ）[ 言語 = javascript]
{
if （final）zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nfinal =' 、final）;
}
ClientMethod selectItem（
鍵
価値
which ）[ 言語 = javascript]
{
if （which ！= 'drill' ）zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nwhich =' 、which）;
}
ClientMethod getContent（
レベル
鍵
値 ）[ 言語 = javascript]
{
var content = {title： '' 、items：[]、headerButtons：[]、footerButtons：[]};
if （key == '' ）{
content.title = 'タイトル' ;
content.headerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / cancel_48.png' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / calendar_48.gif' }];
content.footerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / delete_24.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / delete_24.png' }];
content.items [content.items.length] = {display： 'caption' 、caption： 'Select' 、action： 'select' 、style： 'color：darkblue;' 、キー： 'keySelect' 、値： 'value' };
content.items [content.items.length] = {display： 'value' 、text： 'Value' 、無効：true};
content.items [content.items.length] = {display： 'info' 、キャプション： 'Info' 、help： 'Help' 、image： 'deepsee / add_64.png' 、text： 'Text' };
content.items [content.items.length] = {display： 'html' 、content： '<hr /> <p> bla-bla-bla </ p>' };
content.items [content.items.length] = {display： 'section' 、caption： 'Section' 、captionStyle： 'color：red;' 、スタイル： '背景：青;' };
content.items [content.items.length] = {display： 'value-cells' 、style： 'height：55px;' 、cellsPerRow： 3 、セル：[{キャプション： 'C1' 、値： 'V1' }、
{キャプション： 'C2' 、値： 'V2' }、
{キャプション： 'C3' 、値： 'V3' }]};
content.items [content.items.length] = {display： 'caption-value-vt' 、caption： 'Switch' 、value：false、edit： 'switch' 、key： '' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Switch' 、value：false、edit： 'switch' 、key： '' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'String' 、value： '$$$ bla' 、edit： 'string' 、action： 'drill' 、キー： 'keyText1' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Slider' 、value： 70 、edit： 'slider' 、minValue： 0 、maxValue： 100 };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Slider-Toggle' 、value： 70 、edit： 'slider-toggle' 、minValue： 0 、maxValue： 100 、 stepSize： 10 };
content.items [content.items.length] = {display： 'caption-value-hz' 、
キャプション： 'Choice' 、
編集： 'choice' 、
valueList： 's1、s2、s3、s4' 、
displayList： 'd1、d2、d3、d4' 、
値： 's2' 、
valueStyle： 'font-size：12pt; font-weight：bold;' 、
choiceStyles： '色：赤; ^色：青; ^色：黄色; ^色：黒; };
content.items [content.items.length] = {display： 'caption-value-hz' 、
キャプション： 'Choice-Multi' 、
編集： 'choice-multi' 、
valueList： 's1、s2、s3、s4' 、
displayList： 'd1、d2、d3、d4' 、
値： 's1、s4' 、
valueStyle： 'font-size：12pt; font-weight：bold;' 、
choiceStyles： '色：赤; ^色：青; ^色：黄色; ^色：黒; };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Image' 、edit： 'string' 、action： 'drill' 、key： 'keyImage' 、value： 'deepsee /add_64.png ' };
content.items [content.items.length] = {display： 'caption-value-hz' 、キャプション： 'Color' 、action： 'drill' 、key： 'keyColor' };
content.items [content.items.length] = {display： 'caption-value-hz' 、キャプション： 'Font' 、アクション： 'drill' 、キー： 'keyFont' 、値： 'tahoma' };
content.items [content.items.length] = {display： 'image-caption' 、caption： 'Image-Caption' };
content.items [content.items.length] = {display： 'image-caption-value' 、caption： 'Image-Caption-Value' 、text： 'Image-Caption-Value' };
content.items [content.items.length] = {display： 'image-caption-value-hz' 、
キャプション： 'Caption' 、
テキスト： 'テキスト' 、
アクション： 'popup' 、
url： 'mailto：test@gmail.com' 、
キー： 'key' 、
canDrag：true、
closeButton：true};
} else if （key == 'keyImage' ）{
content.title = 'Image' ;
var list = [];
list [list.length] = {image： '' 、キャプション： 'empty' 、値： '' 、スタイル： '' };
list [list.length] = {image：値、キャプション：値、値：値};
list [list.length] = {image： 'deepsee / cancel_48.png' 、キャプション： 'deepsee / cancel_48.png' 、値： 'deepsee / cancel_48.png' 、スタイル： '' };
content.html = zen（ 'navigator' ）.getIconListHTML（リスト、キー、値）;
} else if （key == 'keyColor' ）{
content.title = 'Color' ;
content.html = zen（ 'navigator' ）.getColorChooserHTML（key、value、 'html' ）;
} else if （key == 'keyFont' ）{
content.title = 'Font' ;
content.html = zen（ 'navigator' ）.getFontChooserHTML（キー、値）;
} else if （key == 'keyText1' ）{
content.title = 'Text1' ;
content.footerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / lamp_48.gif' }];
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'String' 、value： 'v2' 、edit： 'string' 、action： 'drill' 、key： 'keyText2 ' };
} else if （key == 'keyText2' ）{
content.title = 'Text2' ;
content.headerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / lamp_48.gif' }];
var list = [
{キャプション： 'タイトル' 、値： 'v1' 、ヒント： 'タイトルを使用' }、
{キャプション： 'カテゴリ' 、値： 'v2' 、ヒント： 'カテゴリを使用' }、
{キャプション： 'タイプ' 、値： 'v3' 、ヒント： 'タイプを使用' }、
];
content.html = zen（ 'navigator' ）.getChooserListHTML（リスト、キー、値、 'テキストタグ' 、 'これらは特別なタグ' ）;
}
コンテンツを 返す ;
}
/// Internet Explorerが最新のレンダリングエンジンを使用するようにします。
メソッド ％OnDrawHTMLMeta（） As％ステータス
{
$$$ ZENISIE ＆html << meta http-equiv = "X-UA-Compatible" content = "IE = edge" / >>
$$$ OKを終了OK
}
}
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ナビゲーター
id = "ナビゲーター"
footerHeight = "40"
showDisclosure = "true"
expanded = "true"
ongetcontent = "zenPage.getContent（レベル、キー、値）を返す;"
onselect = "zenPage.selectItem（key、value、which）;"
onchange = "zenPage.dataChange（key、value、final）;"
onbuttonclick = "zenPage.buttonClick（key）;"
onclosebuttonclick = "zenPage.closeButtonClick（key）;"
/>
</ ページ >
}
ClientMethod buttonClick（ key ）[ 言語 = javascript]
{
zenAlert（ 'key =' 、key）;
}
ClientMethod closeButtonClick（ key ）[ 言語 = javascript]
{
zenAlert（ '（closebutton）key =' 、key）;
}
ClientMethod dataChange（
鍵
価値
final ）[ 言語 = javascript]
{
if （final）zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nfinal =' 、final）;
}
ClientMethod selectItem（
鍵
価値
which ）[ 言語 = javascript]
{
if （which ！= 'drill' ）zenAlert（ 'key =' 、key、 '\ nvalue =' 、value、 '\ nwhich =' 、which）;
}
ClientMethod getContent（
レベル
鍵
値 ）[ 言語 = javascript]
{
var content = {title： '' 、items：[]、headerButtons：[]、footerButtons：[]};
if （key == '' ）{
content.title = 'タイトル' ;
content.headerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / cancel_48.png' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / calendar_48.gif' }];
content.footerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / delete_24.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / delete_24.png' }];
content.items [content.items.length] = {display： 'caption' 、caption： 'Select' 、action： 'select' 、style： 'color：darkblue;' 、キー： 'keySelect' 、値： 'value' };
content.items [content.items.length] = {display： 'value' 、text： 'Value' 、無効：true};
content.items [content.items.length] = {display： 'info' 、キャプション： 'Info' 、help： 'Help' 、image： 'deepsee / add_64.png' 、text： 'Text' };
content.items [content.items.length] = {display： 'html' 、content： '<hr /> <p> bla-bla-bla </ p>' };
content.items [content.items.length] = {display： 'section' 、caption： 'Section' 、captionStyle： 'color：red;' 、スタイル： '背景：青;' };
content.items [content.items.length] = {display： 'value-cells' 、style： 'height：55px;' 、cellsPerRow： 3 、セル：[{キャプション： 'C1' 、値： 'V1' }、
{キャプション： 'C2' 、値： 'V2' }、
{キャプション： 'C3' 、値： 'V3' }]};
content.items [content.items.length] = {display： 'caption-value-vt' 、caption： 'Switch' 、value：false、edit： 'switch' 、key： '' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Switch' 、value：false、edit： 'switch' 、key： '' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'String' 、value： '$$$ bla' 、edit： 'string' 、action： 'drill' 、キー： 'keyText1' };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Slider' 、value： 70 、edit： 'slider' 、minValue： 0 、maxValue： 100 };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Slider-Toggle' 、value： 70 、edit： 'slider-toggle' 、minValue： 0 、maxValue： 100 、 stepSize： 10 };
content.items [content.items.length] = {display： 'caption-value-hz' 、
キャプション： 'Choice' 、
編集： 'choice' 、
valueList： 's1、s2、s3、s4' 、
displayList： 'd1、d2、d3、d4' 、
値： 's2' 、
valueStyle： 'font-size：12pt; font-weight：bold;' 、
choiceStyles： '色：赤; ^色：青; ^色：黄色; ^色：黒; };
content.items [content.items.length] = {display： 'caption-value-hz' 、
キャプション： 'Choice-Multi' 、
編集： 'choice-multi' 、
valueList： 's1、s2、s3、s4' 、
displayList： 'd1、d2、d3、d4' 、
値： 's1、s4' 、
valueStyle： 'font-size：12pt; font-weight：bold;' 、
choiceStyles： '色：赤; ^色：青; ^色：黄色; ^色：黒; };
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'Image' 、edit： 'string' 、action： 'drill' 、key： 'keyImage' 、value： 'deepsee /add_64.png ' };
content.items [content.items.length] = {display： 'caption-value-hz' 、キャプション： 'Color' 、action： 'drill' 、key： 'keyColor' };
content.items [content.items.length] = {display： 'caption-value-hz' 、キャプション： 'Font' 、アクション： 'drill' 、キー： 'keyFont' 、値： 'tahoma' };
content.items [content.items.length] = {display： 'image-caption' 、caption： 'Image-Caption' };
content.items [content.items.length] = {display： 'image-caption-value' 、caption： 'Image-Caption-Value' 、text： 'Image-Caption-Value' };
content.items [content.items.length] = {display： 'image-caption-value-hz' 、
キャプション： 'Caption' 、
テキスト： 'テキスト' 、
アクション： 'popup' 、
url： 'mailto：test@gmail.com' 、
キー： 'key' 、
canDrag：true、
closeButton：true};
} else if （key == 'keyImage' ）{
content.title = 'Image' ;
var list = [];
list [list.length] = {image： '' 、キャプション： 'empty' 、値： '' 、スタイル： '' };
list [list.length] = {image：値、キャプション：値、値：値};
list [list.length] = {image： 'deepsee / cancel_48.png' 、キャプション： 'deepsee / cancel_48.png' 、値： 'deepsee / cancel_48.png' 、スタイル： '' };
content.html = zen（ 'navigator' ）.getIconListHTML（リスト、キー、値）;
} else if （key == 'keyColor' ）{
content.title = 'Color' ;
content.html = zen（ 'navigator' ）.getColorChooserHTML（key、value、 'html' ）;
} else if （key == 'keyFont' ）{
content.title = 'Font' ;
content.html = zen（ 'navigator' ）.getFontChooserHTML（キー、値）;
} else if （key == 'keyText1' ）{
content.title = 'Text1' ;
content.footerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / lamp_48.gif' }];
content.items [content.items.length] = {display： 'caption-value-hz' 、caption： 'String' 、value： 'v2' 、edit： 'string' 、action： 'drill' 、key： 'keyText2 ' };
} else if （key == 'keyText2' ）{
content.title = 'Text2' ;
content.headerButtons = [{caption： 'Caption1' 、key ： 'key1 ' 、image： 'deepsee / add_64.png' }、
{caption： 'Caption2' 、key： 'key2' 、image： 'deepsee / lamp_48.gif' }、
{caption： 'Caption3' 、key： 'key3' 、image： 'deepsee / lamp_48.gif' }];
var list = [
{キャプション： 'タイトル' 、値： 'v1' 、ヒント： 'タイトルを使用' }、
{キャプション： 'カテゴリ' 、値： 'v2' 、ヒント： 'カテゴリを使用' }、
{キャプション： 'タイプ' 、値： 'v3' 、ヒント： 'タイプを使用' }、
];
content.html = zen（ 'navigator' ）.getChooserListHTML（リスト、キー、値、 'テキストタグ' 、 'これらは特別なタグ' ）;
}
コンテンツを 返す ;
}
/// Internet Explorerが最新のレンダリングエンジンを使用するようにします。
メソッド ％OnDrawHTMLMeta（） As％ステータス
{
$$$ ZENISIE ＆html << meta http-equiv = "X-UA-Compatible" content = "IE = edge" / >>
$$$ OKを終了OK
}
}
スクリーンショット<ナビゲーター> 
番号1
番号2
番号3
番号4
番号5
番号6
7番
番号1
番号2
番号3
番号4
番号5
番号6
7番
例4：<lookup>
このコンポーネントは、目的のアイテムをすばやく検索する機能を備えたドロップダウンリストです。
リスト項目には、複数の列と画像を含めることができます。
検索はすべての列で実行されます。
このコンポーネントは、次のより複雑なコンポーネントで使用されます。
<lookup>のサンプルコード
クラスhtml5.test4 Extends％ZEN.Component.page
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ルックアップ
id = "lookup"
idProperty = "key"
textProperty = "キャプション"
imageProperty = "image"
styleList = "色：赤 ;、 色：青;"
propertyList = "キー、キャプション、a、b"
ongetdata = "zenPage.getdata（コンテキスト）を返す;"
/>
</ ページ >
}
ClientMethod getdata （ context ）[ 言語 = javascript]
{
return [{key： ' key1 ' 、caption： 'caption1' 、image： 'deepsee / add_16.png' 、a： 'a1' 、b： 'b1' }、
{key： 'key2' 、キャプション： 'caption2' 、a： 'a2' 、b： 'b2' }、
{key： 'key3' 、キャプション： 'caption3' 、a： 'a3' 、b： 'b3' }、
{key： 'key4' 、キャプション： 'caption4' 、a： 'a4' 、b： 'b4' }
];
}
ClientMethod onloadHandler（）[ 言語 = javascript]
{
zen（ 'lookup' ）.setValue（ 'key3' 、 'caption3' ）;
}
メソッド ％OnDrawHTMLMeta（） As％ステータス
{
$$$ ZENISIE ＆html << meta http-equiv = "X-UA-Compatible" content = "IE = edge" / >>
$$$ OKを終了OK
}
}
{
///このStyleブロックには、ページのCSSスタイル定義が含まれます。
XData スタイル
{
< スタイル タイプ = "text / css" >
</ スタイル >
}
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< ルックアップ
id = "lookup"
idProperty = "key"
textProperty = "キャプション"
imageProperty = "image"
styleList = "色：赤 ;、 色：青;"
propertyList = "キー、キャプション、a、b"
ongetdata = "zenPage.getdata（コンテキスト）を返す;"
/>
</ ページ >
}
ClientMethod getdata （ context ）[ 言語 = javascript]
{
return [{key： ' key1 ' 、caption： 'caption1' 、image： 'deepsee / add_16.png' 、a： 'a1' 、b： 'b1' }、
{key： 'key2' 、キャプション： 'caption2' 、a： 'a2' 、b： 'b2' }、
{key： 'key3' 、キャプション： 'caption3' 、a： 'a3' 、b： 'b3' }、
{key： 'key4' 、キャプション： 'caption4' 、a： 'a4' 、b： 'b4' }
];
}
ClientMethod onloadHandler（）[ 言語 = javascript]
{
zen（ 'lookup' ）.setValue（ 'key3' 、 'caption3' ）;
}
メソッド ％OnDrawHTMLMeta（） As％ステータス
{
$$$ ZENISIE ＆html << meta http-equiv = "X-UA-Compatible" content = "IE = edge" / >>
$$$ OKを終了OK
}
}
スクリーンショット<lookup> 
番号1
番号2
番号3
番号1
番号2
番号3
例＃5：<dataGrid>
このコンポーネントは、列をさまざまなタイプ（写真、ドロップダウンリストなど）にすることができるデータを操作するためのスプレッドシートの単純化された類似物です。
数式とページもサポートされています。
<dataGrid>のサンプルコード
クラスhtml5.test5 Extends％ZEN.Component.page
{
パラメーター JSINCLUDES As STRING = "zenCSLM.js" ;
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup >
< ボタンの キャプション = "行の追加" onclick = "zenPage.addRow（）;" />
< ボタンの キャプション = "列の追加" onclick = "zenPage.addColumn（）;" />
</ hgroup >
< hgroup >
< dataGrid
controllerId = "json"
selectMode = "cells"
hasFormulas = "false"
currRow = "2"
currColumn = "2"
gridTitle = " Header1 "
multiSelect = "false" >
< summaryRow caption = "Amount" />
</ dataGrid >
< dataGrid
id = "dg2"
selectMode = "cells"
currRow = "1"
currColumn = "3"
gridTitle = " Title3 "
showRowSelector = "false"
multiSelect = "true"
pageSize = "3"
hasFormulas = "true"
onaction = "zenAlert（ 'row ='、row、 '\ nname ='、name、 '\ nvalue ='、value）;"
ongetlookupdata = "zenPage.getdata（コンテキスト）を返す;" >
< columnDescriptor caption = "f1" value = "= power（2,4）" />
< columnDescriptor caption = "f2" value = "= concat（2、＆quot; a＆quot ;, rowno（））" />
< columnDescriptor caption = "f3" value = "= sum（2,3,3、colno（））" />
< columnDescriptor caption = "f4" value = "= [$ col＃2]。[$ row＃3]" />
< columnDescriptor caption = "a" value = "6" />
< columnDescriptor caption = "b" value = "5" />
< columnDescriptor caption = "c" value = "4" />
< columnDescriptor caption = "d" type = "button" name = "n1" value = "= [$ col＃3]。[$ row＃1]" />
< columnDescriptor caption = "e" type = "checkbox" name = "n2" />
< columnDescriptor caption = "f" type = "image" image = "images / save.png" />
< columnDescriptor caption = "g" type = "link" name = "n3" value = "link" />
< columnDescriptor caption = "h" type = "lookup" name = "n4" aux = "aux4" value = " qwerty " />
< rowDescriptor caption = "r1" />
< rowDescriptor caption = "r2" />
< rowDescriptor caption = "r3" />
</ dataGrid >
</ hgroup >
</ ページ >
}
メソッド SrvGetData（
ByRef pParameters 、
出力 pMetaData 、
出力 pData ） As％Status
{
pMetaData = $ LB （1,2,3）を 設定し ます
pData （1）= $ LB （1,2,3）を設定します
pData （2）= $ LB （4,5,6）を設定します
設定 pData （3）= $ LB （7,8,9）
$$$ OKを終了OK
}
ClientMethod getdata （ context ）[ 言語 = javascript]
{
zenAlert（ZLM.jsonStringify（コンテキスト））;
return [{id： 'id1' 、text ： 'text1' }、{id： 'id2' 、text： 'text2' }、{id： 'id3' 、text ： 'text3' }、{id： 'id4' 、テキスト： 'text4' }];
}
ClientMethod addRow（）[ 言語 = javascript]
{
var model = zen（ 'json' ）.getContentObject（）;
var record = {};
for （ model.children [ 0 ]の var p ）{
レコード[p] = 10 ;
}
model.children [model.children.length] = レコード;
zen（ 'json' ）.setContentObject（モデル）;
var grid = zen（ 'dg2' ）;
var rowDesc = zenPage.createComponent（ 'rowDescriptor' ）;
grid.rowDescriptors [grid.rowDescriptors.length] = rowDesc;
rowDesc.caption = 'r' + grid.rowDescriptors.length;
grid.updateGrid（false）;
}
ClientMethod addColumn（）[ 言語 = javascript]
{
var grid = zen（ 'dg2' ）;
var colDesc = zenPage.createComponent（ 'columnDescriptor' ）;
grid.columnDescriptors [grid.columnDescriptors.length] = colDesc;
colDesc.caption = 'c' + grid.columnDescriptors.length;
colDesc.value = grid.columnDescriptors.length +3 ;
grid.updateGrid（false）;
var model = zen（ 'json' ）.getContentObject（）;
for （ var n = 0 ; n < model.children.length; n ++ ）{
if （model.children [n]）{
model.children [n] [grid.getColumnCount（）] = n;
}
}
zen（ 'json' ）.setContentObject（モデル）;
}
}
{
パラメーター JSINCLUDES As STRING = "zenCSLM.js" ;
///このXMLブロックは、このページのコンテンツを記述します。
XData コンテンツ[ XMLNamespace = " www.intersystems.com/zen" ]
{
< page xmlns = " www.intersystems.com/zen" title = "" >
< jsonProvider id = "json" OnGetArray = "SrvGetData" />
< hgroup >
< ボタンの キャプション = "行の追加" onclick = "zenPage.addRow（）;" />
< ボタンの キャプション = "列の追加" onclick = "zenPage.addColumn（）;" />
</ hgroup >
< hgroup >
< dataGrid
controllerId = "json"
selectMode = "cells"
hasFormulas = "false"
currRow = "2"
currColumn = "2"
gridTitle = " Header1 "
multiSelect = "false" >
< summaryRow caption = "Amount" />
</ dataGrid >
< dataGrid
id = "dg2"
selectMode = "cells"
currRow = "1"
currColumn = "3"
gridTitle = " Title3 "
showRowSelector = "false"
multiSelect = "true"
pageSize = "3"
hasFormulas = "true"
onaction = "zenAlert（ 'row ='、row、 '\ nname ='、name、 '\ nvalue ='、value）;"
ongetlookupdata = "zenPage.getdata（コンテキスト）を返す;" >
< columnDescriptor caption = "f1" value = "= power（2,4）" />
< columnDescriptor caption = "f2" value = "= concat（2、＆quot; a＆quot ;, rowno（））" />
< columnDescriptor caption = "f3" value = "= sum（2,3,3、colno（））" />
< columnDescriptor caption = "f4" value = "= [$ col＃2]。[$ row＃3]" />
< columnDescriptor caption = "a" value = "6" />
< columnDescriptor caption = "b" value = "5" />
< columnDescriptor caption = "c" value = "4" />
< columnDescriptor caption = "d" type = "button" name = "n1" value = "= [$ col＃3]。[$ row＃1]" />
< columnDescriptor caption = "e" type = "checkbox" name = "n2" />
< columnDescriptor caption = "f" type = "image" image = "images / save.png" />
< columnDescriptor caption = "g" type = "link" name = "n3" value = "link" />
< columnDescriptor caption = "h" type = "lookup" name = "n4" aux = "aux4" value = " qwerty " />
< rowDescriptor caption = "r1" />
< rowDescriptor caption = "r2" />
< rowDescriptor caption = "r3" />
</ dataGrid >
</ hgroup >
</ ページ >
}
メソッド SrvGetData（
ByRef pParameters 、
出力 pMetaData 、
出力 pData ） As％Status
{
pMetaData = $ LB （1,2,3）を 設定し ます
pData （1）= $ LB （1,2,3）を設定します
pData （2）= $ LB （4,5,6）を設定します
設定 pData （3）= $ LB （7,8,9）
$$$ OKを終了OK
}
ClientMethod getdata （ context ）[ 言語 = javascript]
{
zenAlert（ZLM.jsonStringify（コンテキスト））;
return [{id： 'id1' 、text ： 'text1' }、{id： 'id2' 、text： 'text2' }、{id： 'id3' 、text ： 'text3' }、{id： 'id4' 、テキスト： 'text4' }];
}
ClientMethod addRow（）[ 言語 = javascript]
{
var model = zen（ 'json' ）.getContentObject（）;
var record = {};
for （ model.children [ 0 ]の var p ）{
レコード[p] = 10 ;
}
model.children [model.children.length] = レコード;
zen（ 'json' ）.setContentObject（モデル）;
var grid = zen（ 'dg2' ）;
var rowDesc = zenPage.createComponent（ 'rowDescriptor' ）;
grid.rowDescriptors [grid.rowDescriptors.length] = rowDesc;
rowDesc.caption = 'r' + grid.rowDescriptors.length;
grid.updateGrid（false）;
}
ClientMethod addColumn（）[ 言語 = javascript]
{
var grid = zen（ 'dg2' ）;
var colDesc = zenPage.createComponent（ 'columnDescriptor' ）;
grid.columnDescriptors [grid.columnDescriptors.length] = colDesc;
colDesc.caption = 'c' + grid.columnDescriptors.length;
colDesc.value = grid.columnDescriptors.length +3 ;
grid.updateGrid（false）;
var model = zen（ 'json' ）.getContentObject（）;
for （ var n = 0 ; n < model.children.length; n ++ ）{
if （model.children [n]）{
model.children [n] [grid.getColumnCount（）] = n;
}
}
zen（ 'json' ）.setContentObject（モデル）;
}
}
<dataGrid>のスクリーンショット 
番号1
番号2
番号3
番号1
番号2
番号3
すべての例のソースコードをダウンロードします 。
PS：もちろん、スタイルを変更することでコンポーネントの標準的な外観を好みに変更できます。または、機能を拡張する必要がある場合、既存のコンポーネントを継承して独自のコンポーネントを作成できます。オブジェクトDBMSの利点により、これを簡単に行うことができます。