当面板已经渲染到其他div时,如何将面板重新渲染到不同的div

时间:2022-06-14 19:02:35

I have created a Ext.Panel object, it rendered properly to specified div element on my page.

我创建了一个Ext.Panel对象,它正确地呈现给我页面上的指定div元素。

I want to replace the panel object underlying element(previously rendered div element) to another div which will be identified dynamically.

我想将面板对象底层元素(先前渲染的div元素)替换为另一个将动态识别的div。

Here I don't want to create the Panel object once again by specifying identified div element, I need to make use of existing panel object and need to show the panel in the place where the identified div exists.

在这里,我不想再通过指定标识的div元素再次创建Panel对象,我需要使用现有的panel对象,并且需要在所识别的div存在的位置显示该面板。

Can any one helps me regarding this.

任何人都可以帮我解决这个问题。

Thanks Venkat

1 个解决方案

#1


If you create your panel as a custom extension, with it's own namespace:

如果您将面板创建为自定义扩展,并使用它自己的命名空间:

Ext.namespace('My.Panel');

My.Panel.SomePanel = Ext.extends(Ext.Panel,{
    // Your custom panel configuration here
    itemId:'myPanel'
});

Ext.reg('mypanel',My.Panel.SomePanel);

Then you can create your panel whenever it might be needed, even referencing it by the xtype you've registered:

然后,您可以在需要时创建面板,甚至可以通过您注册的xtype引用它:

var myWin = new Ext.Window({
    title:'Some Title',
    height: 300,
    width: 300,
    items:[{
        xtype: 'mypanel',
        data: someData
    }]
});

var myTabs = new Ext.TabPanel({
    title: 'Some Tab Panel',
    activeTab: 0,
    items:[{
        xtype: 'mypanel',
        title: 'SomePanel number 1'
    }]
});

#1


If you create your panel as a custom extension, with it's own namespace:

如果您将面板创建为自定义扩展,并使用它自己的命名空间:

Ext.namespace('My.Panel');

My.Panel.SomePanel = Ext.extends(Ext.Panel,{
    // Your custom panel configuration here
    itemId:'myPanel'
});

Ext.reg('mypanel',My.Panel.SomePanel);

Then you can create your panel whenever it might be needed, even referencing it by the xtype you've registered:

然后,您可以在需要时创建面板,甚至可以通过您注册的xtype引用它:

var myWin = new Ext.Window({
    title:'Some Title',
    height: 300,
    width: 300,
    items:[{
        xtype: 'mypanel',
        data: someData
    }]
});

var myTabs = new Ext.TabPanel({
    title: 'Some Tab Panel',
    activeTab: 0,
    items:[{
        xtype: 'mypanel',
        title: 'SomePanel number 1'
    }]
});