ExtJS Pivot Gridの拡張

ExtJS3.3のPivotGridは、ヘッダのrendererは無く、セルのrendererのパラメータが値しか受け取れない仕様となっている。今回初めて使用したが、必要に迫られてHackしたのでメモしておく。

それぞれ下記に数行のコードを修正、追加すればよい
・ヘッダのrendererの実装： Ext.grid.PivotAxsisのbuildHeaders()メソッド
　　　行列のそれぞれ各ディメンジョンごとに指定可能
・セルのrendererの拡張： Ext.grid.GridViewのrenderRows()メソッド
　　　値以外に、行のカウンタ、列のカウンタ、行ヘッダの情報、列ヘッダの情報、
　　　グリッドの参照を受け取れるようにした

実装結果はこちら

http://www123.ddo.jp/extest3/pivot/modifiedpivotexample.html

ExtJS pivotのサンプル

ExtJS pivotのサンプルは下記に紹介されているが、残念なことにリンクが切れている

Ext JS 3.3 Beta 2 がリリース

サンプルは別URLに残っているのでリンクをあげておく

サンプル１
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/simple.html
サンプル２
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/people.html
サンプル３
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/countries.html

ExtJSで折れ線グラフを出したときの線のスタイル

ExtJSのチャート(Ext.chart)は簡単にグラフを表示できるのだが、
マニュアルに何が指定できるのか説明がほとんどない。

デコンパイラでcharts.swfの内部を調べて何ができるのか少し調べてみた。
ほんとは動的にseriesを増減させるメソッドが無いか調べていたのだが
それらしいものは無かった。
代わりにseriesで指定できそうなstyleのプロパティを見つけたのでメモしておく
※visibilityでおおっと思ったがpi chart専用だった

{
 height:350,
 xtype: 'linechart',
 store: store,
 xField: 'date',
 series: [{
  type:'line',
  displayName: 'line1',
  yField: 'val1',
  style: {
   color: 0xFF9999,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 },{
  type:'line',
  displayName: 'line2',
  yField: 'val2',
  style: {
   color: 0x99FF99,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 }]
}

「color」はサンプルのコードにあり、意味も明らかだ
「lineSize」は線の太さでデフォルトの太めの線は「3」が設定してあるように思える
「lineAlpha」は線の不透明度でデフォルトは「1(おそらく不透明)」になっている
「alpha」はマーカの不透明度だと思う

他に
images 円グラフのみ
image 折れ線グラフのマーカのイメージ？
mode
colors
borderColor
borderAlpha
fillColor
fillAlPha
size
lineColor 折れ線グラムのみ
lineAlpha 折れ線グラムのみ
showAreaFill
areaFillAlpha
connectPoints 折れ線グラムのみ
connectDistinuousPoints
distinuousDashLength
showLabels
hideOverlappingLabels
font
visibility 円グラフのみ
skin 折れ線グラフのみ

とが、charts.swf > action(3) > Charts > setSeriesStyles() のswitchのcaseラベルにあったが、未調査。

ExtJS の Grid の ヘッダーにスタイルを適用する

ExtJS の Grid の ヘッダーにスタイルを適用にまよったのでメモ

カラムの指定に

{header:'field1', css:'color: green;'},

のように指定すればセルにcssが適用されるが、
ヘッダに適用する為のコンフィグオプションは無くどうするか迷った。

　http://www.sencha.com/forum/showthread.php?94369-Grid-Header-Style&p=447180
をみるとidを指定しスタイルを書けばいいらしい。

スタイルの指定に迷ったが

{header:'field1', id:'field1'}

としたならば、

.x-grid3-hd-field1 {
  color: green;
}

セルも指定したいなら、

.x-grid3-hd-field1,.x-grid3-col-field1 {
  color: green;
}

とかけばいい。

json_encode()代替関数

以前、php5.2未満のサーバのために、json_encode()の代替となる関数を書いた。
いくつかのプログラムで使用してきたが、3年以上たってバグを発見したので、メモしておく。

自作json_encode()は原形をほぼとどめていないが、
phpのマニュアルの中の02-May-2007 01:55のUser Contributed Notesで
Yi-Ren Chen at NCTU CSIEさんが書いたphp_json_encode()を改造して作ったものだ。

json作成のロジックで、数字だったらそのまま使い、文字ならばクォートして使用する
ような部分があるが、ここで数字の判定を

if (is_numeric($val)) return $val;

と記述していたが、これに

$data = array('id'=>'011')

のような入力を食わせると、

{"id":011}

が出力されてしまう。これはブラウザのjavascriptに8進数として処理され

{id:9}

と解釈される。

とりあえず

if (is_int($val)||is_float($val)) return $val;

のように記述し、

{id:"011"}

と受け取られるようになったことを確認したが、過去作ったシステムが、
異常動作しないかひやひやものだ。

Yi-Ren Chenさんのコードを元にjson_encode相当関数を作った世界中の人たちも
大丈夫だったのかなあと心配してみる。

修正済みコード
http://sourceforge.jp/projects/extwiki/svn/view/trunk/plugin/json_encode.php?view=markup&revision=107&root=extwiki

<?php // $Id: json_encode.php 3 2010-10-02 14:56:27Z mashiki $
/**
 * json_encode: use this  for early version(<5.2) of php
 *     which support "multibyte" but doesn't support "json_encode".
 * 
 * Modified by mashiki 2008,2009,2011
 * 
 * Original written by Yi-Ren Chen at NCTU CSIE as php_json_encode()
 *  User Contributed Notes 02-May-2007 01:55 in PHP online manual
 */
function json_encode($val) {
 if (is_int($val)||is_float($val)) return $val;
 if (is_bool($val)) return $val?'true':'false';
 if (is_array($val)) {
  $len = count($val);
  for($ii=0; $ii<$len && isset($val[$ii]); ++$ii) {}
  $temp = array();
  if($len==$ii) {
   for($i=0;$i<$len;$i++) {
    $temp[] = sprintf("%s", json_encode($val[$i]));
   }
   return '['. implode(",",$temp) .']';
  } else {
   foreach($val as $key => $item) {
    $temp[] = sprintf("%s:%s", json_encode($key), json_encode($item));
   }
   return '{'. implode(",", $temp) .'}';
  }
 }
 // else string
 static $from = array('\\',  "\n", "\r", '"');
 static $to   = array('\\\\','\\n','\\r','\\"');
 static $cmap = array(0x80, 0xFFFF, 0, 0xFFFF);
 return '"'. preg_replace_callback(
  '/&#([0-9]+);/',
  create_function('$match','return sprintf("\\u%04x", $match[1]);'),
  mb_encode_numericentity(str_replace($from, $to, $val), $cmap, 'UTF-8')
 ) . '"';
}
?>

window.printで１ページしか印刷できない問題

　ExtWikiでアクティブパネルの印刷をしようとし、タブの内容をiframeにコピーし、window.printを使って印刷するようにしたところ、最初の１ページしか印刷されないという現象に遭遇した。
同じ方法をExtJSのAPIドキュメントのタブパネルに試したところ、同じように１ページしか印刷されなかった。
　同様な現象が出たのでこれは一般的な問題かと思い、http://www.sencha.com/forum/showthread.php?121909-SOLVED-How-to-print-the-document-on-tabpanel&p=563722 の質問を投げてみた。その後、iframeを見えるようにして確認をしたところ、１瞬、スクロールバーが見えることに気がついた。ステップ実行で１つ１つスタイルシートを適用したところ原因が判明。

　結局この問題はdoc.cssにある「html,body {overflow:hidden}」の設定が問題だった。ExtWikiも初期にExtJSのAPIドキュメントの表示に似せようと、スタイルの設定を真似た為にこの設定が紛れ込んだようだ。
現在のExtJSはViewportを使用すると、上記のスタイルが設定されるので、この設定は不要であった。doc.cssに残っているのも歴史的な残骸かと思う。

作成した、ブックマークレット：ExtJS APIページの印刷
※上記は「Hide Inherited Members」と「Extend All Members」を反映しないので使い道はいまいちです

utf-8のjsファイルをextdocで処理する

今まで、utf-8のjsファイルのext-docでの処理が文字化けしてしまうため、一旦、s-jisにしてから、処理を行っていた。
今日、ext-docのバージョンが上がっていないかと、
http://www.sencha.com/forum/showthread.php?55214-ext-doc-ExtJS-style-JavaScript-comments-processor/page26

にアクセスしたところ、javaのオプションで
java -Dfile.encoding=UTF8 -jar path_to\ext-doc.jar ...
とすればいいという情報を見つけた。
試してみると、文字化けもなくうまく動作する。

utf-8 → s-jis はサクラのマクロでやっていたので、手間としてはそれほど変わらないが、正解がわかったのですっきり。