カラム幅を動的に変更する

フレームワークに追加されたSencha Touchグリッドは素晴らしいものです。どのようにカラムの幅を動的に変更するかというのは、最もリクエストが多い質問です。基本的に、このようにすると画面の向きに変更が行われた後にグリッドが全画面表示になるのが可能となります。下記のグリッド定義は動的な幅を設定したカラムのグリッドを構築します。もちろん、全てのカラムは flex: 1 (または33.33%)の幅があることが想定されていますが、これはあなたのユースケースによって簡単に変更できます。注：これは動的な幅に関して公式にサポートされるまでの一時的な解決方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Ext.define('DynamicGrid', {
    extend: 'Ext.grid.Grid',
    config: {
        fullscreen: true,
    },
    initialize: function () {
        Ext.Viewport.on('orientationchange', 'handleOrientationChange', this);
        this.callParent();
        this.handleOrientationChange(Ext.Viewport, null, Ext.Viewport.getWindowWidth());
    },
    handleOrientationChange: function(viewport,orientation,width,height){
        var columns = this.getColumns();
 
        Ext.each(columns, function(col, index) {
            col.setWidth(width/columns.length);
        });
    }
});

Sencha Touch Gridについて詳しくはドキュメントを参照して下さい。

エレメントのイベントをリッスンする際のベストプラクティス

By Mitchell Simoens

多くの開発者から、クリックイベントなどのエレメントのイベントをどのようにリッスンするか、というリクエストがあります。`afterrender`イベントを使って、その後に要素のリスナーを追加するという解決方法をよく見かけます。確かにこの方法で動作しますが、エレメントのイベントをリッスンする方法として、これは最適ではありません。例として`afterrender`メソッドは下記のようになります：

1
2
3
4
5
6
7

listeners : {
    afterrender : function(component) {
        component.getEl().on(‘click’, function(e, t) {
            //...
        });
    }
}

このアプローチには、いくつかの問題点があります：

1. `afterrender`イベントは一度発火しますが、そのイベントは削除されません。この問題を解決するには、`single：true`を追加します。そうすることで、そのイベントが最初に発火した後に自動的に削除されます。
2. これは`mon`メソッドではなく、`on`メソッドを利用しています。`mon`メソッドはコンポーネントが破棄された場合、自動的にリスナーをクリーンアップしてくれます。そうしないと、イベントリスナーが削除されないことが原因でメモリーリークが発生する可能性があります。
3. これはよく無名関数といっしょに見かけます。技術的に考えると、これは特に悪いことではありませんが、無名関数はデバッグと管理がしずらく、再利用もできません。

クリックイベントをリッスンする、より良い方法は次の通りです：

1
2
3
4
5
6

listeners : {
    element : ‘el’,
    click : function(e, t) {
        //...
    }
}

更に言えば、あるコンポーネント中の指定したエレメントのクリックイベントだけをリッスンしたいかもしれません。これは`delegate`イベントオプションを利用することで実現できます。他にも`anchor`要素のクリックなどでのイベントのバブリングを止めるために、`stopEvent`、または `preventDefault` イベントオプションを利用できます。

1
2
3
4
5
6
7
8

listeners : {
    element : ‘el’,
    delegate : ‘a.some-cls’,
    stopEvent : true,
    click : function(e, t) {
        //...
    }
}

詳しくはここで実際の例をご覧下さい。