ビュー・ヘルパーが提供される各々のフォームdijitには、 対応するZend_Form要素があります。 dijitパラメータを操作するための以下のメソッドがそれらすべてにあります: setDijitParam($key, $value): dijitパラメータを一つセットします。 dijitパラメータがすでに存在すれば、上書きされます。 setDijitParams(array $params): 一度にいくつかのdijitパラメータをセットします。 渡されたパラメータにマッチする既存のパラメータは上書きされます。 hasDijitParam($key): 与えられたdijitパラメータが定義されたか存在している場合はtrueを返します。 それ以外はfalseを返します。 getDijitParam($key): 与えられたdijitパラメータを返します。 利用できない場合は null値を返します。 getDijitParams(): dijitパラメータを全て返します。 removeDijitParam($key): 与えられたdijitパラメータを除去します。 clearDijitParams(): 現行定義されたdijitパラメータを全て消去します。 Dijitパラメータは、dijitParams public プロパティに保存されます。 このように、あなたは単にこのプロパティを要素の上に置くことによって、 既存のフォーム要素をdijit使用可能にすることができます; あなたは、単にパラメータを操作するのを容易にするために、 上記のアクセッサを持っていません。 その上、dijitに特有の要素は以下に該当するデコレーターの独特な一覧を実装します: addDecorator('DijitElement') ->addDecorator('Errors') ->addDecorator('HtmlTag', array('tag' => 'dd')) ->addDecorator('Label', array('tag' => 'dt')); ]]> 実質的に、Dijit要素が、標準的なViewHelperデコレーターの代わりに使われます。 最後に、ベースDijit要素により、 確実にDojoビュー・ヘルパー・パスがビューの上に置かれることになります。 Dijit要素、DijitMultiの変化はMulti abstract フォーム要素の機能を提供します。 そして、開発者が 'multiOptions' を指定できるようにします。 - 一般的に select の option またはラジオ のoptionです。 以下のdijit要素は、標準的なZend Framework配布において出荷されます。 標準的なボタン要素に 由来していないので、 同じ機能を実装して、ドロップインの代わりとして使うことができます。 以下の機能が公開されます: 名前が提供されないならば、 getLabel()はボタン・ラベルとして要素名を利用します。 さらに、翻訳メッセージにマッチした翻訳アダプターが利用できれば、 それは名前を翻訳します。 isChecked()は、 提出される値がラベルにマッチするかどうか決定します; もしマッチするなら、それはtrueを返します。 これは、フォームが提出されたとき、どのボタンが使われたかについて決定することに役立ちます。 さらに、デコレーターのDijitElement及び DtDdWrapperだけがボタン要素のために使われます。 addElement( 'Button', 'foo', array( 'label' => 'Button Label', ) ); ]]> 標準的なチェックボックス要素 に由来していないので、 それは同じ機能を実装します。 これは、以下のメソッドが公開されることを意味します setCheckedValue($value): 要素がチェックされたときに使う値を設定します。 getCheckedValue(): チェックされたときに要素で使う値を取得します。 setUncheckedValue($value): チェックされていないときに要素で使う値を設定します。 getUncheckedValue(): チェックされていないときに要素で使う値を取得します。 setChecked($flag): 要素をチェック済みにするか否か設定します。 isChecked(): 要素が現在チェック済みか判断します。 addElement( 'CheckBox', 'foo', array( 'label' => 'A check box', 'checkedValue' => 'foo', 'uncheckedValue' => 'bar', 'checked' => true, ) ); ]]> コンボボックス dijitビュー・ヘルパー・文書 にみられるように、コンボボックスは選択とテキスト入力の混合です。 そして、自動補完及び、提示された選択肢の代わりを指定できるようにします。 フィルタリング選択は同じことですが、任意の入力を許しません。 コンボボックスはラベル値を返します。 期待に反するオプション値は返しません。 この理由から、コンボボックスはInArrayバリデーターを自動登録しません。 （FilteringSelectsがそうするけれども） コンボボックスとフィルタリング選択フォーム要素は、 dojo.dataデータ・ストア（使用された場合）を指定することだけでなく、 選ばれた選択肢を調べて、セットするためにアクセッサとミューテーターを提供します。 それらはDijitMultiから拡張します。 そして、それはsetMultiOptions()及びsetMultiOption()メソッドによって 選ばれた選択肢を指定することができます。 さらに、以下のメソッドを利用できます: getStoreInfo(): 現行で設定されているデータストア情報を全て取得します。 現行で設定されたデータがなければ、空の配列を返します。 setStoreId($identifier): ストアの識別変数を設定します。 （通常、Dojoで 'jsId' 属性によって言及されます） これは、有効なjavascript変数の名前でなければなりません。 getStoreId(): ストアの識別変数名を取得します。 setStoreType($dojoType): 使用するデータストアクラスを設定します; 例えば "dojo.data.ItemFileReadStore" getStoreType(): 使用するdojoデータストアクラスを取得します。 setStoreParams(array $params): データ・ストア・オブジェクトを構成するために使われるパラメータをいずれも設定します。 例えば、 dojo.data.ItemFileReadStore データストアでは dojo.dataオブジェクトを返す場所を指す 'url' パラメータを期待します。 getStoreParams(): 現行で設定されているデータストアパラメータをいずれも取得します; もしなければ、空の配列を返します。 setAutocomplete($flag): ユーザーが要素から離れるとき、選ばれた項目が使われるかどうかを示します。 getAutocomplete(): 自動補完フラグの値を取得します。 dojo.dataストアが要素で登録されなければ、 登録された選択肢の配列のキーを検証するInArrayバリデーターを この要素はデフォルトで登録します。 setRegisterInArrayValidator(false)を呼び出すことでも、 registerInArrayValidator設定キーにfalse値を渡すことでも、 このふるまいを抑制することができます。 addElement( 'ComboBox', 'foo', array( 'label' => 'ComboBox (select)', 'value' => 'blue', 'autocomplete' => false, 'multiOptions' => array( 'red' => 'Rouge', 'blue' => 'Bleu', 'white' => 'Blanc', 'orange' => 'Orange', 'black' => 'Noir', 'green' => 'Vert', ), ) ); ]]> addElement( 'ComboBox', 'foo', array( 'label' => 'ComboBox (datastore)', 'storeId' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/js/states.txt', ), 'dijitParams' => array( 'searchAttr' => 'name', ), ) ); ]]> 前述の例はComboBoxの代わりに FilteringSelectを使用します。 通貨テキストボックスは、主に通貨入力をサポートするためにあります。 通貨はローカライズされるかもしれず、小数も非小数もサポートできます。 内部的には、通貨テキストボックスは 数値テキストボックスや 検証テキストボックスおよび テキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。 さらに、下記の制約メソッドを使用できます: setCurrency($currency): 使用する通貨種類を設定します; ISO-4217 仕様に従うでしょう。 getCurrency():現行の通貨種類を取得します。 setSymbol($symbol): ３文字からなるISO-4217 通貨記号を設定します。 getSymbol(): 現行の通貨記号を取得します。 setFractional($flag): 通貨で小数を許すかどうか設定します。 getFractional(): 小数フラグの状態を取得します。 addElement( 'CurrencyTextBox', 'foo', array( 'label' => 'Currency:', 'required' => true, 'currency' => 'USD', 'invalidMessage' => 'Invalid amount. ' . 'Include dollar sign, commas, and cents.', 'fractional' => false, ) ); ]]> 日付テキストボックスは、 カレンダー・ドロップダウンで日付（クライアント側日付確認とフォーマッティングだけでなく） を選ぶために提供します。 内部的に、日付テキストボックスは 検証テキストボックス およびテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます: setAmPm($flag)及びgetAmPm(): 時刻でAM/PM 文字列を使うかどうか setStrict($flag)及びgetStrict(): 入力を確認した時にマッチする厳しい正規表現を使うかどうか。 デフォルトはfalseですが、空白文字やいくつかの省略形を許します。 setLocale($locale)及びgetLocale(): 指定した要素で使うロケールを設定または取得します。 setDatePattern($pattern)及び getDatePattern(): 日付をフォーマットする unicode 日付形式パターンを提示または取得します。 setFormatLength($formatLength)及び getFormatLength(): 使用する形式の長さの種類を提示または取得します; "long"、"short"、"medium"または"full"のどれか一つです。 setSelector($selector)及び getSelector(): セレクタのスタイルを提示または取得します; "date" や "time" のどちらかでしょう。 addElement( 'DateTextBox', 'foo', array( 'label' => 'Date:', 'required' => true, 'invalidMessage' => 'Invalid date specified.', 'formatLength' => 'long', ) ); ]]> エディタはリッチなHTML内容を作成して、 編集するために利用できるWYSIWYGエディタを提供します。 dijit.Editorはプラグイン可能で、 必要に応じてカスタム・プラグインで拡張されるかもしれません; 詳しくは dijit.Editorドキュメントをご覧下さい。 エディタ・フォーム要素は、 下記のいくつかのアクセッサとミューテーターを いろいろなdijitパラメータを操作するために提供します: captureEventsは、 編集エリア自体と連携するイベントです。 捕獲したイベントを操作するために以下のアクセッサとミューテーターを利用できます: addCaptureEvent($event) addCaptureEvents(array $events) setCaptureEvents(array $events) getCaptureEvents() hasCaptureEvent($event) removeCaptureEvent($event) clearCaptureEvents() eventsは、 onClickやonKeyUpなどのような標準的なDOMイベントです。 イベントを操作するために以下のアクセッサとミューテーターを利用できます: addEvent($event) addEvents(array $events) setEvents(array $events) getEvents() hasEvent($event) removeEvent($event) clearEvents() pluginsはエディターにツールバーのための追加のツールや、 許可する追加スタイルなどの機能を加えます。 プラグインを操作するために以下のアクセッサとミューテーターを利用できます: addPlugin($plugin) addPlugins(array $plugins) setPlugins(array $plugins) getPlugins() hasPlugin($plugin) removePlugin($plugin) clearPlugins() editActionIntervalは、 アンドゥ操作のためにイベントをまとめるために使われます。 デフォルトでこの値は3秒です。 setEditActionInterval($interval)メソッドが値を設定するために使われるかもしれません。 一方で、getEditActionInterval()が値を取得します。 focusOnLoadは、 ページが読み込まれたとき、 この指定のエディタがフォーカスを受けるかどうか判断するために使われます。 デフォルトでこれはfalseです。 メソッドsetFocusOnLoad($flag)が値を設定するために使われるかもしれません。 一方で、getFocusOnLoad()が値を取得します。 heightはエディターの高さを指定します; デフォルトでこれは300pxです。 メソッドsetHeight($height)が値を設定するために使われるかもしれません。 一方で、getHeight()が値を取得します。 inheritWidthは、 エディタが親コンテナの幅と単純にデフォルトの100%幅のどちらを使うか決定するために使われます。 デフォルトでこれはfalseです。 (すなわち、画面の幅一杯を満たします) メソッドsetInheritWidth($flag)が値を設定するために使われるかもしれません。 一方で、getInheritWidth()が値を取得します。 minHeightはエディターの高さの最小値を設定します; デフォルトでこれは1emです。 メソッドsetMinHeight($height)が値を設定するために使われるかもしれません。 一方で、getMinHeight()が値を取得します。 styleSheetsは、 どの追加CSSスタイルシートがエディタの表示に影響を及ぼすために使われるか示します。 デフォルトでは何も登録されず、それはページ・スタイルを継承します。 エディタ・スタイルシートを操作するために以下のアクセッサとミューテーターを利用できます: addStyleSheet($styleSheet) addStyleSheets(array $styleSheets) setStyleSheets(array $styleSheets) getStyleSheets() hasStyleSheet($styleSheet) removeStyleSheet($styleSheet) clearStyleSheets() addElement('editor', 'content', array( 'plugins' => array('undo', '|', 'bold', 'italic'), 'editActionInterval' => 2, 'focusOnLoad' => true, 'height' => '250px', 'inheritWidth' => true, 'styleSheets' => array('/js/custom/editor.css'), )); ]]> 水平スライダーは、 ある範囲で数値を選択するためのスライダーUI部品を提供します。 内部的には、それはフォームによって送信されるhidden要素の値をセットします。 水平スライダーは、抽象的なスライダーdijit要素に由来します。 さらに、スライダー・ルールとルール・ラベルをセットして設定するための、 いろいろなメソッドがあります。 setTopDecorationDijit($dijit)及び setBottomDecorationDijit($dijit): スライダーのトップかボトムで使うdijitの名前をセットします。 これは、接頭辞 "dijit.form." を含んではいけません。 むしろ final 名だけ - "HorizontalRule" または "HorizontalRuleLabels" のうちの1つ - を含まなければなりません。 setTopDecorationContainer($container)及び setBottomDecorationContainer($container): ルールのコンテナ要素のために使用する名前を指定します; 例えば、'topRule' や 'topContainer'など。 setTopDecorationLabels(array $labels)及び setBottomDecorationLabels(array $labels): RuleLabels dijit型のうちの1つで使用するラベルをセットします。 これらは、インデックスを付けられた配列でなければなりません; 与えられたラベル位置（例えば始めまたは終わり）をスキップするために、 一つの空の場所を指定します。 setTopDecorationParams(array $params)及び setBottomDecorationParams(array $params): 与えられたルール、 またはRuleLabels dijitを構成するときに使うdijitパラメータです。 setTopDecorationAttribs(array $attribs)及び setBottomDecorationAttribs(array $attribs): 与えられたルールまたはRuleLabels HTML要素コンテナのために指定するHTML属性です。 getTopDecoration()及び getBottomDecoration(): 上記のミューテーターによって提示されたように、 与えられたルールまたはRuleLabels定義のためにすべてのメタデータを取得します。 The following will create a horizontal slider selection with integer values ranging from -10 to 10. The top will have labels at the 20%, 40%, 60%, and 80% marks. The botton will have rules at 0, 50%, and 100%. Each time the value is changed, the hidden element storing the value will be updated. addElement( 'HorizontalSlider', 'horizontal', array( 'label' => 'HorizontalSlider', 'value' => 5, 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'topDecorationDijit' => 'HorizontalRuleLabels', 'topDecorationContainer' => 'topContainer', 'topDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'topDecorationParams' => array( 'container' => array( 'style' => 'height:1.2em; font-size=75%;color:gray;', ), 'list' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), 'bottomDecorationDijit' => 'HorizontalRule', 'bottomDecorationContainer' => 'bottomContainer', 'bottomDecorationLabels' => array( '0%', '50%', '100%', ), 'bottomDecorationParams' => array( 'list' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), ) ); ]]> A number spinner is a text element for entering numeric values; it also includes elements for incrementing and decrementing the value by a set amount. The following methods are available: setDefaultTimeout($timeout)及び getDefaultTimeout(): set and retrieve the default timeout, in milliseconds, between when the button is held pressed and the value is changed. setTimeoutChangeRate($rate)及び getTimeoutChangeRate(): set and retrieve the rate, in milliseconds, at which changes will be made when a button is held pressed. setLargeDelta($delta)及び getLargeDelta(): set and retrieve the amount by which the numeric value should change when a button is held pressed. setSmallDelta($delta)及び getSmallDelta(): set and retrieve the delta by which the number should change when a button is pressed once. setIntermediateChanges($flag)及び getIntermediateChanges(): set and retrieve the flag indicating whether or not each value change should be shown when a button is held pressed. setRangeMessage($message)及び getRangeMessage(): set and retrieve the message indicating the range of values available. setMin($value)及びgetMin(): set and retrieve the minimum value possible. setMax($value)及びgetMax(): set and retrieve the maximum value possible. addElement( 'NumberSpinner', 'foo', array( 'value' => '7', 'label' => 'NumberSpinner', 'smallDelta' => 5, 'largeDelta' => 25, 'defaultTimeout' => 500, 'timeoutChangeRate' => 100, 'min' => 9, 'max' => 1550, 'places' => 0, 'maxlength' => 20, ) ); ]]> A number text box is a text element for entering numeric values; unlike NumberSpinner, numbers are entered manually. Validations and constraints can be provided to ensure the number stays in a particular range or format. Internally, NumberTextBox derives from ValidationTextBox and TextBox; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます: setLocale($locale)及びgetLocale(): specify and retrieve a specific or alternate locale to use with this dijit. setPattern($pattern)及び getPattern(): set and retrieve a number pattern format to use to format the number. setType($type)及びgetType(): set and retrieve the numeric format type to use (should be one of 'decimal', 'percent', or 'currency'). setPlaces($places)及びgetPlaces(): set and retrieve the number of decimal places to support. setStrict($flag)及びgetStrict(): set and retrieve the value of the strict flag, which indicates how much leniency is allowed in relation to whitespace and non-numeric characters. addElement( 'NumberTextBox', 'elevation', array( 'label' => 'NumberTextBox', 'required' => true, 'invalidMessage' => 'Invalid elevation.', 'places' => 0, 'constraints' => array( 'min' => -20000, 'max' => 20000, ), ) ); ]]> PasswordTextBox is simply a ValidationTextBox that is tied to a password input; its sole purpose is to allow for a dijit-themed text entry for passwords that also provides client-side validation. Internally, NumberTextBox derives from ValidationTextBox and TextBox; それらのクラスのメソッドが全て利用可能です。 addElement( 'PasswordTextBox', 'password', array( 'label' => 'Password', 'required' => true, 'trim' => true, 'lowercase' => true, 'regExp' => '^[a-z0-9]{6,}$', 'invalidMessage' => 'Invalid password; ' . 'must be at least 6 alphanumeric characters', ) ); ]]> RadioButton wraps standard radio input elements to provide a consistent look and feel with other dojo dijits. RadioButton extends from DijitMulti, which allows you to specify select options via the setMultiOptions()及びsetMultiOption() methods. By default, this element registers an InArray validator which validates against the array keys of registered options. You can disable this behavior by either calling setRegisterInArrayValidator(false), or by passing a false value to the registerInArrayValidator configuration key. addElement( 'RadioButton', 'foo', array( 'label' => 'RadioButton', 'multiOptions' => array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ), 'value' => 'bar', ) ); ]]> SimpleTextarea acts primarily like a standard HTML textarea. However, it does not support either the rows or cols settings. Instead, the textarea width should be specified using standard CSS measurements. Unlike Textarea, it will not grow automatically addElement( 'SimpleTextarea', 'simpletextarea', array( 'label' => 'SimpleTextarea', 'required' => true, 'style' => 'width: 80em; height: 25em;', ) ); ]]> Slider is an abstract element from which HorizontalSlider and VerticalSlider both derive. It exposes a number of common methods for configuring your sliders, including: setClickSelect($flag)及び getClickSelect(): set and retrieve the flag indicating whether or not clicking the slider changes the value. setIntermediateChanges($flag)及び getIntermediateChanges(): set and retrieve the flag indicating whether or not the dijit will send a notification on each slider change event. setShowButtons($flag)及び getShowButtons(): set and retrieve the flag indicating whether or not buttons on either end will be displayed; if so, the user can click on these to change the value of the slider. setDiscreteValues($value)及び getDiscreteValues(): set and retrieve the number of discrete values represented by the slider. setMaximum($value)及びgetMaximum(): スライダーの最大値を設定します。 setMinimum($value)及びgetMinimum(): スライダーの最小値を設定します。 setPageIncrement($value)及び getPageIncrement(): set the amount by which the slider will change on keyboard events. Example usage is provided with each concrete extending class. While there is no Dijit named SubmitButton, we include one here to provide a button dijit capable of submitting a form without requiring any additional javascript bindings. It works exactly like the Button dijit. addElement( 'SubmitButton', 'foo', array( 'required' => false, 'ignore' => true, 'label' => 'Submit Button!', ) ); ]]> TextBox is included primarily to provide a text input with consistent look-and-feel to the other dijits. However, it also includes some minor filtering and validation capabilities, represented in the following methods: setLowercase($flag)及び getLowercase(): set and retrieve the flag indicating whether or not input should be cast to lowercase. setPropercase($flag)及び getPropercase(): set and retrieve the flag indicating whether or not the input should be cast to Proper Case. setUppercase($flag)及びgetUppercase(): set and retrieve the flag indicating whether or not the input should be cast to UPPERCASE. setTrim($flag)及びgetTrim(): set and retrieve the flag indicating whether or not leading or trailing whitespace should be stripped. setMaxLength($length)及び getMaxLength(): set and retrieve the maximum length of input. addElement( 'TextBox', 'foo', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) ); ]]> Textarea acts primarily like a standard HTML textarea. However, it does not support either the rows or cols settings. Instead, the textarea width should be specified using standard CSS measurements; rows should be omitted entirely. The textarea will then grow vertically as text is added to it. addElement( 'Textarea', 'textarea', array( 'label' => 'Textarea', 'required' => true, 'style' => 'width: 200px;', ) ); ]]> TimeTextBox is a text input that provides a drop-down for selecting a time. The drop-down may be configured to show a certain window of time, with specified increments. Internally, TimeTextBox derives from DateTextBox, ValidationTextBox and TextBox; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます: setTimePattern($pattern)及び getTimePattern(): set and retrieve the unicode time format pattern for formatting the time. setClickableIncrement($format)及び getClickableIncrement(): set the ISO-8601 string representing the amount by which every clickable element in the time picker increases. setVisibleIncrement($format)及び getVisibleIncrement(): set the increment visible in the time chooser; must follow ISO-8601 formats. setVisibleRange($format)及び getVisibleRange(): set and retrieve the range of time visible in the time chooser at any given moment; must follow ISO-8601 formats. The following will create a TimeTextBox that displays 2 hours at a time, with increments of 10 minutes. addElement( 'TimeTextBox', 'foo', array( 'label' => 'TimeTextBox', 'required' => true, 'visibleRange' => 'T04:00:00', 'visibleIncrement' => 'T00:10:00', 'clickableIncrement' => 'T00:10:00', ) ); ]]> ValidationTextBox provides the ability to add validations and constraints to a text input. Internally, it derives from TextBox, and adds the following accessors and mutators for manipulating dijit parameters: setInvalidMessage($message)及び getInvalidMessage(): set and retrieve the tooltip message to display when the value does not validate. setPromptMessage($message)及び getPromptMessage(): set and retrieve the tooltip message to display for element usage. setRegExp($regexp)及びgetRegExp(): set and retrieve the regular expression to use for validating the element. The regular expression does not need boundaries (unlike PHP's preg* family of functions). setConstraint($key, $value)及び getConstraint($key): set and retrieve additional constraints to use when validating the element; used primarily with subclasses. Constraints are stored in the 'constraints' key of the dijit parameters. setConstraints(array $constraints)及び getConstraints(): set and retrieve individual constraints to use when validating the element; used primarily with subclasses. hasConstraint($key): test whether a given constraint exists. removeConstraint($key)及び clearConstraints(): remove an individual or all constraints for the element. The following will create a ValidationTextBox that requires a single string consisting solely of word characters (i.e., no spaces, most punctuation is invalid). addElement( 'ValidationTextBox', 'foo', array( 'label' => 'ValidationTextBox', 'required' => true, 'regExp' => '[\w]+', 'invalidMessage' => 'Invalid non-space text.', ) ); ]]> VerticalSlider is the sibling of HorizontalSlider, and operates in every way like that element. The only real difference is that the 'top*' and 'bottom*' methods are replaced by 'left*' and 'right*', and instead of using HorizontalRule and HorizontalRuleLabels, VerticalRule and VerticalRuleLabels should be used. The following will create a vertical slider selection with integer values ranging from -10 to 10. The left will have labels at the 20%, 40%, 60%, and 80% marks. The right will have rules at 0, 50%, and 100%. Each time the value is changed, the hidden element storing the value will be updated. addElement( 'VerticalSlider', 'foo', array( 'label' => 'VerticalSlider', 'value' => 5, 'style' => 'height: 200px; width: 3em;', 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'leftDecorationDijit' => 'VerticalRuleLabels', 'leftDecorationContainer' => 'leftContainer', 'leftDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'rightDecorationDijit' => 'VerticalRule', 'rightDecorationContainer' => 'rightContainer', 'rightDecorationLabels' => array( '0%', '50%', '100%', ), ) ); ]]>