Question

This is a novice question. Hopefully this example can educate myself and others As well as fix my problem.

I have an EXTJS layout that is very similar to the EXTJS complex layout example. A TabPanel is the center piece of this layout. One of the tabs renders a GridPanel that displays some data. I want to click on an Edit icon in the table and open up a separate tab to do the editing.

Here are my issues:

1. If mainTabPnl is defined in view_main.js and the handler in grid.js, how do I add a tab to mainTabPnl? This seems like a scope issue.

2. In the following Firefox line, ‘t’ is undefined. Why?

var t = Ext.getCmp(‘main-tab-panel’);

3. If I try to id my tabs, my whole layout goes haywire. What’s happening here?
(see ‘center2’ tab). I thought that if I could do an Ext.getCmp(‘center2’) I could render something in in from a separate handler.

Thanks for any help on this….

// file: view_main.js
var mainTabPnl =  new Ext.TabPanel({
        region: 'center', 
        id: 'main-tab-pnl',
        deferredRender: false,
        activeTab: 0,     
        items: [{
            contentEl: 'center2',
            //id: 'center2',  /*!!! screen goes haywire!! why? !!!*/
            title: 'Main Panel',
            autoScroll: true
        }, {
            contentEl: 'center1',
            title: 'Close Me',
            closable: true,
            autoScroll: true
        }]
    })

 // file: grid.js
 var columns = [{
   // Column Headers
   //...
    },{
        header: 'Actions',
        id: 'actions',
        xtype: 'actioncolumn',
        width: 50,
        items: [{
             icon   : '/site_media/icons/application_edit.png',  
             tooltip: 'Edit Record',
             handler: function(grid, rowIndex, colIndex) {
                 alert("Add-Tab "); // The alert works..

                 /* but mainTabPnl is not defined */ 
                 mainTabPnl.add({
                     title: 'New Tab',
                     iconCls: 'tabs',
                     html: 'Tab Body <br/><br/>',
                     closable:true
                 }).show();
             }
         }];
    }];

Answer 1

Collect all your UI initialization code into a single call to Ext.onReady made from a single file. This will ensure that the ExtJS library is fully initialized before you begin building your widgets and that interacting widgets are instantiated in the proper order.

Specific answers:

1: There is no “scoping issue” between multiple JS files pulled into the same page through standard includes. Global symbols defined in each file populate the same window object.

2: ‘main-tab-panel’ doesn’t exist yet at the time of that call. Putting all UI initialization into the same Ext.onReady call will prevent this from happening.

3: You are creating a DOM node with an ID identical to that which you are already using for contentEl.