Passing an object ID to an ExtJS window

Question

I have a window with a tabpanel in which I layout a form (first tab) and data view (second tab). This window might be open from a grid (for example double click). These 2 tabs describe:

tab1: data for an object (let's say a ca)
tab2: images of the same object.

Each of the two components (data view and form) have their own store (DirectStore). Both of the stores have a param that is send to the server in order to know who's fields value or who's images are returned.

My questions are:

how do I pass the object id from the grid to the window
how do I pass the object id to the tab's components in order to load the right data.
where from do I make the calls for loading the above store?

Info:

My question is also related to best practice, nice way. This would be used in a MVC app.
My window has to take all the data from Direct call.

Greendrake Greendrake · Accepted Answer · 2013-06-12T02:50:13

I assume you have created your own window class which cares about creating the tabs in its initComponent method. Since your window is to represent a particular object (i.e. a record from the grid row), it makes sense to pass either the whole record or just its id to the window when you create it. You can setup an event handler on your grid like:

var openObjectWindow = function(view, record) {
    Ext.create('YourWindowClass', {
        objectId: record.getId()
    })
};
grid.on('itemdblclick', openObjectWindow);

When you are up to declaring tabs in your window's initComponent, you pass objectId to them in similar way (assuming that your tabs' classes have been already defined):

this.defaults = {
    objectId: this.objectId
}
this.items = [
    {
        xtype: 'mydatatab'
    },
    {
        xtype: 'myimagestab'
    }
]

Finally, you should set your stores to load automatically upon creation (autoLoad: true), provided that the stores are created along with their tabs when they are rendered.

Passing an object ID to an ExtJS window

1 Answers