Pokudaの長文: JavaScript

ラベル JavaScript の投稿を表示しています。すべての投稿を表示

【Sencha ExtJs】callSuper(), callParent()の振る舞いの違い

callSuper()とcallParent()メソッドの振る舞いの違いを整理してみました。

違いは、以下のとおりです。

callSuper()では、Overrideされた基底クラスのメソッドは呼ばれません。

　・Override -> Base.

対してcallParent()では、Overrideされた基底クラスのメソッドが呼ばれます。

　・Override -> Derived -> Base.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var object = Ext.create('Ext.some.DerivedClass');
        object.method();
    }
});
/**
 * 基底クラス
 */
Ext.define('Ext.some.Class', {
    method: function() {
        console.log('Base method');
    }
});

/**
 * 派生クラス
 */
Ext.define('Ext.some.DerivedClass', {
    extend: 'Ext.some.Class',
    method: function() {
        console.log('Derived method.');
        this.callParent();
    }
});

/**
 * 派生クラスをOverride
 */
Ext.define('App.paches.DerivedClass', {
    override: 'Ext.some.DerivedClass',

    method: function() {
        console.log('Override method.');
        //this.callSuper(); // Override -> Base.
        this.callParent(); // Override -> Derived -> Base.
    }
});

以下にデモ＆ソースがあるので参考にしてみて下さい。

デモ＆ソース

【Sencha ExtJs Modern】Gridの列を通貨形式で表示する方法

Gridの列上で日本円の通貨形式で表示するサンプルを実装してみました。
「renderer」に表示形式をセットする処理を埋め込んで実装しています。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': '橋元',
                'email': 'hashimoto@xxx.com',
                'phone': '55-3434-3434',
                'salary': '5'
            }, {
                'name': '小西',
                'email': 'konishi@xxx.com',
                'phone': '33-3434-3434',
                'salary': '8500000'
            },{
                'name': 'ポク田ポーク',
                'email': 'pork@xxx.com',
                'phone': '55-3434-3434',
                'salary': '999999999'
            }]
        });

        var grid = Ext.create('Ext.grid.Grid', {
            title: '名簿',
            store: store,

            columns: [{
                text: '名前',
                width: 100,
                dataIndex: 'name',
                renderer: function(value, record, dataIndex, cell, column) {
                    console.log(value);
                    console.log(record.get('email'));
                    if (value == 'ポク田ポーク')
                        cell.element.dom.style.backgroundColor = "#99ccff";
                    else
                        cell.element.dom.style.backgroundColor = "#ccffcc";
                    return value;

                }
            }, {
                text: 'Email',
                width: 200,
                dataIndex: 'email'
            }, {
                text: '電話番号',
                width: 100,
                dataIndex: 'phone'
            }, {
                text: '給料',
                textAlign: 'right',
                width: 150,
                dataIndex: 'salary',
                align: 'right',
                renderer: function (value, record) {
                    var tmp = Ext.util.Format.number(value, '0,000');
                    if (tmp != '') {
                        var tmp = "￥" + tmp;
                    }
                    return tmp;
                    //return Ext.util.Format.currency(value, "￥");
                }
            }],
            fullscreen: true,
            renderTo: Ext.getBody()
        });
    }
});

以下にデモ＆ソースがあるので参考にしてみて下さい。
デモ＆ソース

Sencha ExtJs ModernでIFRAMEを組込む

Ext.ux.IFrameは、Classic Toolkitのみで提供されています。
Modern Toolkitでは、Ext.Panelのhtmlプロパティ等にiframeタグを直接記入することにより実現できます。

以下のサンプルは、クロスドメインにならないように同じサイトの別のサンプルをIFRAMEで表示します。
デモ＆ソース