Question

In my MVC application in Controller i have following function to add and focus new tab to TabPanel with DataView inside:

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

And the problem is in the last line. When i uncomment tabb[0].setActiveTab(gallery_view) the new tab is focused but empty and if i leave the line commented the new tab with dataView is populated with data but not focused. I really dont have any idea why setActiveTab() causes DataView not to display at all. The gallery_view widget is Ext.view.View extension.

Answer 1

I’m not sure how come you get the data view if there’s no setActiveTab, but there seem to be some issue with this code:

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

First you create a new widget with Ext.widget() and then you override some config options with Ext.apply(). To my understanding, the latter is fine for primitives but not for objects/arrays.

Generally speaking, the configs are there for the purpose of telling the constructor how to initialise a specific instance of the class. A change to an object’s title through Ext.apply() could work if the object is not rendered yet, but not a change to a store config (upon construction the component might start listening to various store events, this won’t happen by a simple Ext.apply() which only copies configs from one object to another – you’ve already missed the train for a component that was created as far as listening to store events goes).

Please try this instead:

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