Grid Watermarking

by Kevin Cassidy

Ext JS グリッドは使いやついレイアウトでプレゼンを行える素晴らしいツールです。多くのユーザーはここで使われる情報をミーティングやプロモーション素材としてプリントしたいかもしれません。しかし、それと同時にグリッドコンテンツをコピーライト、社外流出禁止など、何しかしらの形式でウォーターマークしたい場合があるかもしれません。

これはグリッドに特定のスタイルを指定し、CSS を使った裏技と組み合わせることで簡単に成し遂げることが可能となります。

このエフェクトを実現じするには、グリッドセルのスタイリングを変える必要があり、グリッドにグリッドコンテンツを邪魔しないレベルの透明度の背景を導入しなければなりません。

これを行うには、まずグリッドスタイリング用の新しいクラスを作成しましょう。この例ではこのスタイルは ‘watermark’ と呼びます。そして、‘cls’ グリッドコンフィギュレーションで使用されます：

cls: ‘watermark’

ここでやっとウォーターマークエフェクトを作成する上で関係する CSS の定義付けを行うことができます。

デフォルトで、すべてのグリッドセルは背景が白色となっております。まず最初にセルの背景を透明に変えましょう。これを行うには、‘watermark’ クラスを含んだ CSS セレクターを定義付けしなければいけません。

cls: ‘watermark’
.watermark .x-grid-item {
background: transparent !important;
}

次のステップはウォーターマーク自体を作成することです。

.watermark .x-grid-body:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(http://url.to.watermark.jpg) center !important; 
background-size: cover !important;
}

上記のスタイルはグリッドボディの前にコンテンツを挿入し、完全にグリッドコンポーネントを覆いかぶさるように配置されます。このエレメントのコンテンツは空ですが、背景イメージが適応され、センタリングされ、エレメントを完全に埋めるように設定されています。不透明度は0.1 (10%)にセットされていますが、これはリクワイアメンツに合わせて変更することが可能です。

記：クライアントやその能力によりますが、不透明度と背景イメージプロパティ(特にIE の古いバージョンでは)の設定は変える必要があるかもしれません。背景イメージのプリントも手動でプリント時に有効化しなければならないかもしれません。

クラス定義上のインスタンス

by Tristan Lee

定期的に、コンポーネントに複数のインスタンスを作成しようとしているが、追加されたインスタンスが理由もなく失敗しているという報告を受けます。最初のインスタンスは動くのですが、なぜ他は動かないのでしょうか？良くある状況をグリッドで見ていきましょう：

Ext.define('SimpsonGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.simpsongrid',
 
    width: 400,
    height: 400,
    store: {
        type: 'users'
    },
 
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname'
    }, {
        text: 'Last Name',
        dataIndex: 'lastname'
    }],
 
    plugins: [Ext.create('Ext.grid.plugin.RowExpander', {
        rowBodyTpl: '<div>Row content</div>'
    })]
 
});

ここでは、RowExpander プラグインを使ってコンテンツを2つ目の行ボディーに表示させるシンプルグリッドを定義付けしています。これは特定のレコードについて追加の詳細を表示させる時によく使われます。ここではこのアプリケーションが情報を別々のビューで表示させるために複数のインスタンスを必要としているとしましょう。もし、問題が起きるとすればここに可能性があるからです。

RowExpander クラスのインスタンスは SimpsonGrid クラスのプロトタイプに適応されます。これはSimpsonGrid クラスの全てのインスタンスが同じプラグインインスタンスをレファレンスするということになりました。そして、これは最初のグリッドインスタンスで行ボディを拡張しようとすると必ず問題を起こしてしまいます。2つ目のインスタンスにも問題をもたらしてしまうことも見られるかもしれません。

これを回避するには、config object を使用し、フレームワークにインスタンス化をハンドルさせましょう：

plugins: [{
     ptype: 'rowexpander',
     rowBodyTpl: '<div>Row content</div>'
}]

これにより、グリッドの各インスタンスはプラグインの独自のインスタンスを持つことになります。プラグインインスタンスを共有した場合に起きる問題の様子を見たい場合はこの fiddle での例をご覧ください。

Sencha Cmd Complise を使ってビルドを作成

by Fred Moseley

多くのアプリケーションでは、sencha app build を使ってアプリケーションの JavaScript をコンパイルします。これは多くの場合に一番適切な方法ではあるものの、よりコンパイルに関して細かく設定をしなければならなかったり、標準のプロセスを越えたやり方でなければいけない状況も出てくるかもしれません。

例えば、複数のアプリケーションがワークスペース内にあり、全てのアプリケーションに必要なファイルを含んだ単一の app.js ファイルを作成したいとしましょう。また代替的に、これらの複数のアプリケーションが李クワイアするフレームワーククラスだけでフレームワークのカスタムビルドを作成したいと思うかもしれません。こういった状況では、sencha compile が使えます。

Compiling Application Code

以下のレスポンスファイルはアプリケーションソース myapp.js とそれがリクワイアするフレームワーククラスだけの最善のビルドを作成します。

compile
    #comma delimited list of paths to the app folders of the 
    #applications you want to use to create custom framework.js
    #also include any other paths you include in your applications classpath in app.json
    -classpath=app,app.js
 
    #transitive/recursive union with the classes 
    #required by your application
    union
        -r
        -namespace=MyAppName
 
    and
 
    #remove development mode preprocessor directives/warnings
    -debug=false
 
    concat
        #Compresses the source file using the YUI
        -yui
 
        #Strips comments from the output file, but preserves whitespace
        -strip
 
        #output filename
        -out=myapp.js

このコマンドを使うことでレスポンスファイルを作成することができます。ファイルを compile.cfgと呼びましょう。レスポンスファイルは以下のコマンドで実行することが可能です：

sencha @compile.cfg

これにより myapp.js ファイルはアプリケーションが必要なクラスを全て含んでいるはずです。

レスポンスファイルは Advanced Sencha Cmd ガイドで詳しく解説されています。

リクワイアされた Framework クラスのコンパイル

exclude オプションを使うことで、このレスポンスファイルをアプリケーションソースだけ、もしくはフレームワークだけを含ませるように変更することが可能です。

以下により framework.js というファイルが作成され、アプリケーションを実行する上で必要なフレームワークファイルだけが含まれています。

compile
    -classpath=app,app.js
    union
        -r
        -namespace=MyAppName
    and
 
    #exclude the application namespace
    exclude
        -namespace=MyAppName
 
    and
    -debug=false
    concat
        -yui
        -strip
        -out=framework.js