使用本地html代码段更新选项卡面板

Question

我有一个简单的应用程序，但对于我的生活，我无法让它工作。我可能缺少一个监听器或getObj函数超出范围。图像映射显示在中心面板中，当用户单击链接时，它会将本地html代码段加载到Tab1面板中。非常直截了当。我已经验证了getObj函数事件确实触发但是任何回调到extJS的调用都失败了。我知道答案就在我面前......我错过了什么？

    Ext.onReady(function(){


    var tab1 = new Ext.Panel ({
        id   : 'Photos',
        title: 'Photos',
        padding: 10,
        autoScroll: true,
        html: '(this content will be replaced with an ajax load)'           
    });
    var tab2 = new Ext.Panel ({
        id: 'Notes',
        title: 'Notes',
        padding: 10,
        autoScroll: true,
        html: '(this content will be replaced with an ajax load)'
    });
    var tab3 = new Ext.Panel ({
        id: 'Docs',
        title: 'Docs',
        padding: 10,
        autoScroll: true,
        html: '(this content will be replaced with an ajax load)'
    });

    var tab4 = new Ext.Panel (
        new Ext.grid.PropertyGrid({
            id: 'Properties',           
            title: 'Properties',
            source: {
                "(name)": "Properties Grid",
                "grouping": false,
                "autoFitColumns": true,
                "productionQuality": false,
                "created": new Date(Date.parse('10/15/2006')),
                "tested": false,
                "version": 0.01,
                "borderWidth": 1
            }
        })
    );  



    var modinfo_panel = new Ext.TabPanel({
        id: 'east-tab',             
        border: false,
        activeTab: 0,
        tabPosition: 'bottom',
        items:[tab1, tab2, tab3, tab4]
    }); 

    var portmain = new Ext.Viewport({
        layout: 'border',
        items: [        
        new Ext.BoxComponent({
                region: 'north',
                id: 'north-panel',
                title: 'north',
                height: 25,
                autoEl: {
                    tag: 'div',
                    html:'<p>Keystone 360 - Project Viewer</p>'
                }
            }), {
                region: 'south',
                id: 'south-panel',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                title: 'South',
                margins: '0 0 0 0'
            }, {
                region: 'east',
                id: 'east-panel',               
                title: 'Properties',
                collapsible: true,
                split: true,
                width: 225,
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit',
                items: [modinfo_panel]
            }, {                
                region: 'west',
                id: 'west-panel',
                title: 'Projects',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [{
                    contentEl: 'west',
                    title: 'Notes',
                    border: false,
                    iconCls: 'nav'
                }, {
                    title: 'Documentation',
                    html: '<p>Some settings in here.</p>',
                    border: false,
                    iconCls: 'settings'
                }]
            },

            new Ext.TabPanel({
                region: 'center', 
                deferredRender: false,
                activeTab: 0,
                items: [{
                    contentEl: 'center1',
                    title: 'Project - Sample',
                    autoScroll: true
                }]
            })]
    });
});

function getObj(item) {     // Show the name of the clicked object in imagemap
    alert(item);
    // tab1.update('new content with update');  
    tab1.load({url:item + '.html', scripts:true});
    // var p1 = Ext.getCmp('Photos');
    // p1.load({url:'PhotoScrollTest.htm', scripts:true, params:{something:else}});
    // Ext.viewport.getComponent('Photos').load({url:PhotoScrollTest.htm,scripts:true, params:{something:else}});       
    // p1 = viewport.getComponent('Photos');

}