Question

在我的menuItem1对象的click事件的下面代码中，如何更改renderContent对象的html内容，以便当用户单击菜单项的标题时，中间的内容页面的变化？

（在我看到的所有示例中，点击事件都在创建新对象但不会更改现有对象。）

Ext.onReady(function(){

    var menuItem1 = new Ext.Panel({
        id: 'panelStart',
        title: 'Start',
        html: 'This is the start menu item.',
        cls:'menuItem'
    });

    var menuItem2 = new Ext.Panel({
        id: 'panelApplication',
        title: 'Application',
        html: 'this is the application page',
        cls:'menuItem'
    });

    var regionMenu = new Ext.Panel({
        region:'west',
        split:true,
        width: 210,
        layout:'accordion',
        layoutConfig:{
            animate:true
        },
        items: [ menuItem1, menuItem2 ]
    });

    var regionContent = new Ext.Panel({
        region: 'center',
        padding:'10',
        autoScroll: true,
        html: 'this is the content'
    });

    new Ext.Viewport({
        layout: 'border',
        items: [ regionMenu, regionContent ]
    });

    menuItem1.header.on('click', function() {
        alert('this appears in alert window');
    // regionContent.set('html', 'new text'); //nothing appears, no error
    // regionContent.set('html', 'new text'); //nothing appears, no error
    // Ext.get('regionContent').html = 'new text'; //error: "regionContent is null"
    // Ext.getCmp('contentArea').html = 'the new text'; //nothing appears, no error
    // Ext.getCmp('contentArea').set('html', 'new text'); //error: "set is not a function"


    });

});

Answer 1

尝试使用“更新”方法：

regionContent.update('new text');

如何从extJS点击事件中访问其他extJS对象？

1 个答案: