javascript - Extjs はタブパネル内のフィールドに設定変数を入力します

Question

tabpanel作成した拡張機能をに入力しようとしています。この拡張機能内には、ストアからの値を持つ可能性のある2 つのフィールド (timefieldと) を持つパネルがあります。datefield

これらの各フィールドは、各タブで異なる値を持つ場合があります。config を介して拡張コンポーネントからこれらの値を渡しています。これまでのところ、これらの値は で確認できますが、console.log()これらの値をフィールド内に入れることはできません。

これが私の拡張コンポーネントの方法です。

Ext.define('PlaylistGrid', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.playlistgrid',
    border: false,
    config: {
        plIndex: 0,
        plDate: '1970-10-10',
        plTime: '00:00:00'
    },

    constructor: function(cfg) {
        Ext.apply(this, cfg);
        this.callParent(arguments);
    },

    items: [{
        layout: 'hbox',
        bodyStyle: 'padding: 5px',
        border: false,
        xtype: 'form',
        name: 'myForm',
        items: [{
            xtype: 'datefield',
            fieldLabel: 'Data de início',
            name: 'datefld',
            itemId: 'datefld'
        }, {
            xtype: 'timefield',
            fieldLabel: 'Horário de início',
            name: 'timefld'

        }, {
            xtype: 'button',
            iconCls: 'save',
            style: 'margin-left: 10px',
            tooltip: 'Salvar data e hora',
            handler: function() {
                Ext.Msg.alert('Salvando...', 'Implementar');
            }
        }]
    }, {
        xtype: 'grid',
        border: false,
        width: '100%',
        height: 476,
        columns: [{
            header: 'Ordem',
            dataIndex: 'order',
            width: 50
        }, {
            header: 'Video',
            dataIndex: 'video',
            width: 308
        }, {
            header: 'Duracao',
            dataIndex: 'duration',
            width: 100
        }, {
            header: 'Formato',
            dataIndex: 'format',
            width: 75
        }]
    }],

    listeners: {
        render: function(e, eOpts) {
            console.log(e.getPlDate());
        }
    }

});

そして、これは私がこのコンポーネントを内部に追加する方法ですtabpanel:

var plSt = Ext.getStore('playlistStore');
plSt.load();
plSt.on('load', function(store, records, successful, eOpts) {
    plSt.each(function(record, idx) {
        var playlist = {
            xtype: 'playlistgrid',
            title: 'Playlist ' + (records[idx].data.playlistId),
            name: 'playlist' + idx,
            plIndex: records[idx].data.playlistId,
            plDate: records[idx].data.playlistDate,
            plTime: records[idx].data.playlistTime
        };
        e.add(playlist);
    });
    if (records.length > 0) {
        e.setActiveTab(1);
    }
})

データは問題ないようですが、日付フィールドに表示されません...それについて何かポイントはありますか?

これを行う方法をすでに検索しましたが、答えがまったく見つかりませんでした。

---

解決した

はい、分かりました。解決策は簡単でした。afterRender現在のタブ インデックスとメソッドを渡す新しい構成変数を追加しました。

これは私がしました

afterRender: function(e, eOpts) {
    var idx = e.getTabIdx();
    var dateFld = Ext.ComponentQuery.query('datefield[name=datefld]');
    dateFld[idx].setValue(new Date(e.getPlDate()));
    //console.log(e.getPlDate());
}

ありがとうございました！