表示幅を最大にしたフィールドエラーメッセージ

by Kevin Cassidy

バリデーションメッセージをフォームフィールドの下(msgTarget: ‘under’) に表示させたいにも関わらず、メッセージが入力フィールドの下にしか表示されないためにメッセージがつぶされたようになってしまうことはありませんか。ここではその問題を改善し、フィールドとラベルを合わせた幅を使用する方法を解説します。

エラーメッセージのスタイルをオーバーライドすることでこの表示は可能となります。フィールドのシングルインスタンスに適用するためには、下記のようにcls値を書き加えてください:

{
        xtype: 'numberfield',
        cls: 'full-width-error',
        fieldLabel: 'Rentention 2',
        allowBlank: false,
        width: 150,
        msgTarget: 'under'
}

最後はメッセージスタイルを以下のようにオーバーライドしてください:

<style>
        .full-width-error .x-form-error-wrap-under-side-label::before { 
display: none !important; 
        }
        .full-width-error .x-form-error-wrap-under .x-form-error-msg {
	display: block !important;
	width: 150px !important;
        }
</style>

Check out this Fiddle

レスポンスファイルを使用してビルドスクリプトを読みやすくする

by Joel Watson

アプリケーションをコンパイルする際にカスタムビルドスクリプトを使用している場合、鎖のようにつながったコマンドの整備がつまらなくなることがあるでしょう。例えば下記のような具合です:

sencha compile -classpath=app.js concat --strip-comments --compress --output-file=full-app-output.js

これは簡単な例ですが、複雑になるにつれメンテナンスが難しくなることはご想像できると思います。

幸いSencha Cmd では「レスポンスファイル」を作ることができます。これによってコマンドを別々のファイルで管理し、CLIでコマンドを入力する代わりにSencha Cmd で読み込むことができます。

整備が難しかった上記のようなコマンドの列はこのようなレスポンスファイルに変換することができます:

// File name: response-file.sencha
compile 
            -classpath=app.js 
concat 
            # remove comments
            --strip-comments 
            # compress with YUI
            --compress 
            # save to full-app-output.js
            --output-file=full-app-output.js

レスポンスファイルの構文において各行は、コマンドラインの配列として解釈されます。そして”#”で始まる行は読み飛ばされるので、これを使用してレスポンスファイルへコメントを残し、そのコマンドの目的や必要性をチームメンバと共有することができます。

レスポンスファイルを作成すれば、それを使用するのは非常に簡単です:

sencha @response-file.sencha

いかがですか。ちょっとした労力で、難解なコマンドの列を読みやすいフォーマットに変換することがレスポンスファイルにできるのです。このファイルを併せてソース管理できます。

開発用ネイティブビルド

by Fred Moseley

開発用/テスト ビルドはExt JS アプリケーションのデバッグに役立ちます。しかしCordova/PhoneGap でパッケージ化されたアプリケーションの開発用ビルドはどのように生成すればよいでしょうか。Sencha Cmd 6 ではCordova/PhoneGap でパッケージ化されたアプリケーションの開発用ビルドを下記のコマンドで作成できます:

sencha app build {build-name} testing

{build-name}は、app.jsonビルドオブジェクトで指定した名前です。

"builds": {
        "native": {
                "packager": "cordova",
                "cordova" : {
                        "config": {
                                "platforms": "ios"
                                "id": "com.mydomain.MyApp"
                        }
                }
        }
}

例えば上記の例で指定されたビルドオブジェクトの開発ビルドを生成するには、コマンドは以下のようになります：

sencha app build native testing

これでCordova/PhoneGap でパッケージ化されたアプリケーションのデバックは非常に簡単になります。