ExtJS 4 DataView inside TabPanel

本文关键字：TabPanel inside DataView ExtJS 更新时间：2023-09-26

在控制器中的MVC应用程序中，我有以下函数将新选项卡添加并聚焦到TabPanel，其中包含DataView：

    show_gallery: function(view, record, item, index, e, opts) {
    var tabb = Ext.ComponentQuery.query('.gallery_panel');
    var gallery_view = Ext.widget('gallery_view');
    var ImageStore = Ext.create('Gallery.store.Images');
    ImageStore.load({url: 'myphoto/index.php/api/feed/json/' + record.data.uuid});
    Ext.apply(gallery_view, {
        title: record.data.name,
        id: record.data.uuid,
        closable:true,
        store: ImageStore
    });
     if (tabb[0].down('#' + record.data.uuid)) {
        console.log('Entered IF');
        //tabb[0].setActiveTab(tabb[0].down('#' + record.data.uuid));
        tabb[0].setActiveTab(record.data.uuid);
     }else{
        console.log('Entered ELSE');
        tabb[0].add(gallery_view);
        if (Ext.getCmp(record.data.uuid)) {
            console.log('THERE IS SUCH UUID');
        }
        //tabb[0].setActiveTab(gallery_view);
     }
},

问题出在最后一行。当我取消注释tabb[0].setActiveTab（gallery_view）时，新选项卡已聚焦但为空，如果我保留注释行，则带有dataView的新选项卡将填充数据但不聚焦。我真的不知道为什么setActiveTab（）导致DataView根本不显示。gallery_view小部件是 Ext.view.View 扩展。

如果没有setActiveTab，我不确定如何获得数据视图，但是此代码似乎存在一些问题：

var gallery_view = Ext.widget('gallery_view');
var ImageStore = Ext.create('Gallery.store.Images');
ImageStore.load({url: 'myphoto/index.php/api/feed/json/' + record.data.uuid});
Ext.apply(gallery_view, {
    title: record.data.name,
    id: record.data.uuid,
    closable:true,
    store: ImageStore
});

首先，使用 Ext.widget（）创建一个新小部件，然后使用 Ext.apply（）覆盖一些配置选项。据我了解，后者适用于原语，但不适用于对象/数组。

一般来说，配置是为了告诉构造函数如何初始化类的特定实例。如果对象尚未呈现，则通过 Ext.apply（）对对象标题的更改可能会起作用，但对存储配置的更改不起作用（在构造时，组件可能会开始侦听各种存储事件，这不会通过简单的 Ext.apply（）发生，它只将配置从一个对象复制到另一个对象 - 就侦听存储事件而言，您已经错过了创建的组件的训练）。

请尝试以下操作：

var ImageStore = Ext.create('Gallery.store.Images');
ImageStore.load({url: 'myphoto/index.php/api/feed/json/' + record.data.uuid});
var gallery_view = Ext.widget('gallery_view', {
    title: record.data.name,
    id: record.data.uuid,
    closable:true,
    store: ImageStore
});