ウィジェット関連はこちらで


(Tmsongbooks215) #1

ウィジェットの参考資料

  • The Definitive Guide to Yii - 日本語 ウィジェット

  • Yii Playground - メニューのInterfaceでいろんなウィジェットをデモとサンプルコード付きでテストできます

Yii Playground - 上と同じ名前ですが、違うみたい?です。ややこしい ( ※追加 2011-04-08 )

  • jQuery UI - Demos & Documentation

その他、Wiki, Forum, Class Referenceなどが参考になるかと思います


(Tmsongbooks215) #2

[color="#8B0000"]CJuiDatePickerについて[/color]

CJuiDatePickerをテストしていたんですが

テーマをbase以外のものにしたときに

ブラウザの画面にパネルの枠が一辺だけ表示されてしまいます

これはバグでしょうか。もしくは、何か自分で変なことをやってしまっているんでしょうか?

IE, Firefox, Chromeで試しましたが、どれもダメでした

config/main.php


'widgetFactory' => array(

	'widgets' => array(

		'CJuiDatePicker' => array(

			'theme' => 'pepper-grinder',

			'name' => 'sample',

			'language' => 'ja',

			'value' => '1900-01-01',

			'options' => array(

				'dateFormat' => 'yy-mm-dd',

			),

		),

		...



views/site/index.php


<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array()); ?>


(Tmsongbooks215) #3

CJuiDatePickerで[color="#8B0000"]ブラウザの画面にパネルの枠が一辺だけ表示される[/color]の件、解決しました

参考リンク - http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=7072

あと、CJuiDatePickerの基本的な使い方と

日本語対応の仕方などを簡単にですが、書いておきます ( モデル対応版 )

'options’はたくさんあるのでこちらのOptionsタブを参考にしてください


<?php $this->widget('zii.widgets.jui.CJuiDatePicker', array(

	'model'=>$model, 'attribute'=>'birthday',

	'language'=>'ja', // 言語設定

	'options'=>array(

		'autoSize'=>'true', // inputの幅を自動で調整するかどうか

		'defaultDate'=>'1930-01-01', // 初期値

		'dateFormat'=>'yy-mm-dd', // 形式

		'showButtonPanel'=>'true', // 「今日」、「閉じる」ボタンを表示させるかどうか

		'yearRange'=>'-70:+0', // 年の範囲 ( 現在の年から70引いた値~現在の年。他には'1930:1999'など可 )

		'changeYear'=>'true', // 年を選択させるかどうか

		'changeMonth'=>'true', // 月を選択させるかどうか

		'showAnim'=>'fade', // 表示アニメーション

	),

)); ?>

その他、レイアウトに関する補足 ( main.cssに追加するなどして対処できます )

日本語にすることによって改行される件は、月の’changeMonth’をfalseにすることでも対処できます


#ui-datepicker-div {font-size:9pt;} /* パネルサイズ変更 */

#ui-datepicker-div thead th {background:none;} /* 曜日背景色の対処 ( blueprint使用時 ) */

#ui-datepicker-div select.ui-datepicker-month, 

#ui-datepicker-div select.ui-datepicker-year { width: 45%;}  /* 日本語にすることによって改行される件の対処 */



( ※変更 2011-06-14 )


(Tmsongbooks215) #4

[color="#8B0000"][size="3"]CGridViewを使用してデータをハイパーリンクで表示し、かつ新しいタブで開くには?

[/size][/color]

CGridViewを使ってhogeカラムのデータ(外部サイトのURLが入っている)を

ハイパーリンクで表示して、かつ、新しいタブで開く場合、答えとして、以下の2通りが出てきました

CDataColumnだと、filterが効き、CLinkColumnだと効きません

だとすると、CLinkColumnはいったい、どのようなケースに使用されるものなんでしょうか?




<?php $this->widget('zii.widgets.grid.CGridView', array(

	'id' => 'hoge-hoge-grid',

	'dataProvider' => $model->search(),

	'filter' => $model,

	'columns' => array(

		// CDataColumn

		array(

			'name' => 'hoge',

			'type' => 'raw',

			'value' => 'CHtml::link(CHtml::encode($data->hoge), $data->hoge, array("target" => "_blank"));',

		),

		// CLinkColumn

		array(

			'header' => 'Hoge',

			'class' => 'CLinkColumn',

			'labelExpression' => '$data->hoge',

			'urlExpression' => '$data->hoge',

			'linkHtmlOptions' => array('target' => '_blank'),

		),

	),

)); ?>




(Softark) #5

コラムの’name’属性を指定すればフィルターが使えると思います。

[EDIT] というのは間違いです。


(Tmsongbooks215) #6

<?php $this->widget('zii.widgets.grid.CGridView', array(

        'id' => 'hoge-hoge-grid',

        'dataProvider' => $model->search(),

        'filter' => $model,

        'columns' => array(

                // CLinkColumn

                array(

                        'header' => 'Hoge',

                        'name' => 'hoge', // こういうことでしょうか?

                        'class' => 'CLinkColumn',

                        'labelExpression' => '$data->hoge',

                        'urlExpression' => '$data->hoge',

                        'linkHtmlOptions' => array('target' => '_blank'),

                ),

        ),

)); ?>


(Softark) #7

済みません。間違いました。

CLinkColumn には name 属性はありません。てっきり、CLinkColumn は CDataColumn の派生だと思い込んでいました。

[EDIT]

filter および sort をサポートしているのは、CDataColumn だけですね。CLinkColumn や CButtonColumn は、CDataColumn の子じゃなくて、兄弟でした。親は CGridColumn です。

汎用性の高い CDataColumn が親クラスだと勘違いしてました。


(Tmsongbooks215) #8

よく理解できました。ありがとうございます。

CButtonColumnにfilterがないのは理解できるんですが

CLinkColumnにはあっても良いんじゃないか?と勝手に思ってたんですけど

いろいろ調べたり、試したりしたんですが、やっぱないみたいです・・・

sortもサポートしていないのは知りませんでした。収穫です。

CLinkColumnのClass Referenceのコメントを見ると

emailを送る際に使用されていますが、こういう使い方がベストなのかもしれないですね


array(

    'class'=>'CLinkColumn',

    'header'=>'e-mail',

    'labelExpression'=>'$data->email',

    'urlExpression'=>'"mailto:".$data->email',

),