解决

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);
    }
})

数据似乎没问题，但它没有显示在日期字段中......你对它有什么意见吗？

我已经搜索了如何执行此操作，但根本找不到答案。

解决

好的，我明白了。解决方案很简单。我刚刚添加了一个新的config var，它传递了当前的tab索引和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());
}

谢谢！

Extjs使用配置变量填充tabpanel中的字段

解决

0 个答案: