Question

Here, i’m registering my app:

App = new Ext.Application({
  name: "App",

  launch: function() {
    this.views.viewport = new this.views.Viewport();
  }
});

This is the way i register new panels and components. I put each of them into seperate js files.

App.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,

    tabBar: {
      dock: 'bottom',
      layout: {
        pack: 'center'
      }
    },

    items: [
      {
        xtype: 'cPanel'
      },
      {
        xtype: 'anotherPanel'
      }
    ]
});

// register this new extended type
Ext.reg('App.views.viewport', App.views.Viewport);

I added the other components in the same manner.

In one my components which is a list view, I want to change the container panel’s activeItem with another panel when tappen on an item, like this: ( Viewport contains this container panel)

App.views.ListApp = Ext.extend(Ext.List, {
  store: App.store,
  itemTpl: "...",
  onItemDisclosure: function(record) {
    App.detailPanel.update(record.data);
    App.cPanel.setActiveItem("detailPanel");
  },
  listeners: {
    itemtap: function(view, index, item, e) {   
        var rec = view.getStore().getAt(index);
        App.views.detailPanel.update(rec.data);
        App.views.cPanel.setActiveItem("detailPanel", {type:"slide", direction: "left"});
    }
  }

});

App.views.detailPanel.update(rec.data);

But it says: can’t call method “update” of undefined

I tried different variations on that line, like:
App.detailPanel.update(rec.data);
and i tried to give detailPanel and cPanel ids, where they were added to their container panel, and tried to reach them with Ext.get(), but none of these worked.

What is the problem here?

And any other advices would be appreciated.
Thanks.

Answer 1

The lazy way: give the panels ids and use:

Ext.getCmp(id)

The recommended way: Assign itemId to your panel and use:

App.views.viewport.getComponent(itemId)

This will allow you to have more than one instance of the same component at aby given time, the first example is not valid cause you can only have a singular id in the DOM tree.

Also getComponent only works for components stored in the items collection.