web formコンポーネント

[Webix]Formコンポーネント入門

web formコンポーネント

Webix Advent Calendar 2014 8日目の記事です。

間が少し空きましたが、今回はFormコンポーネントを使ってみます。
Webixのフォーム昨日は、他のコンポーネントにデータを束縛して連動させたり、変更内容から差分だけを取り出すなど様々な機能があるのですが、とりあえず基本的なところだけを。
いづれまた詳しい内容を掲載するつもりです。

基本

ログインフォームを作ります。
基本的には、Webixのレイアウトシステムに合わせた形でFormパーツを設置していくだけです。
formビューのelemetsの中にパーツを設置していくことで、入力された値の取得などが簡単に行えます。

example

パーツ

Webixにはデータピッカーやカラーピッカーなどのコンポーネントが用意されていて、簡単に扱うことができます。

example

入力値を取得

webixのセレクション($$)にてフォーム要素を指定し、getValuesメソッドを実行することで、フォームに入力されたデータを取得することができます。

example

値を反映する

編集画面などでは、すでに設定されている値を入力フォームに反映する必要がありますが、WebixではsetValuesメソッドを実行するだけで簡単に値を入力フォームに反映できます。
セレクトボックスやラジオボタンの選択なども自動的に反映してくれます。

example

備考

公式のドキュメントは以下より。

document
sample