从表单（按钮）extjs3 在视口中添加面板
Posted
技术标签:
【中文标题】从表单（按钮）extjs3 在视口中添加面板【英文标题】：add panel in viewport from the form(button) extjs3 【发布时间】：2014-05-08 16:21:15 【问题描述】：在表单中添加标签面板
我已经从菜单（viewport）添加了面板，但是如何使用按钮处理程序从表单添加面板存在问题。
【问题讨论】：
【参考方案1】：请查看下面的代码 sn-p。
它将panel 添加到名为'mainPanel' 的panel 中。
请阅读 cmets 以获得更好的说明。
<script type="text/javascript">
Ext.onReady(function ()
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport(
layout: 'border',
items: [
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: 'accordion',
layoutConfig:
animate: true
,
contentEl: 'divMenu'
,
new Ext.Panel(
region: 'center',
id: 'mainPanel',
layout: 'fit',
html: ''
)
]
);
);
function addItem()
var anagPanel = new Ext.Panel(
layout: 'border',
items: [
region: 'north',
html: 'North',
margins: '5 5 0 5',
bodyStyle: 'padding:10px;',
split: true,
html: 'Some content'
,
plain: true,
region: 'center',
html: 'center'
]
);
// the above code removes all existing panel and child items/containers
// just remove the whole if block if you don't want to remove any existing child containers
if(Ext.getCmp('mainPanel').items != undefined)
Ext.getCmp('mainPanel').items.each(function(item)
Ext.getCmp('mainPanel').remove(item, true);
);
// following code is adding an extra panel
Ext.getCmp('mainPanel').add(anagPanel);
Ext.getCmp('mainPanel').doLayout();
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<div id="testPanel" style="border:1px solid aqua;height:0px;display:none;">
<table style="border:1px solid red;width:100%;">
<tr>
<td>ciccio</td>
</tr>
</table>
</div>
<div id="divMenu">
<a onclick="javascript:addItem()" href="#">add item</a>
</div>
【讨论】：
以上是关于从表单（按钮）extjs3 在视口中添加面板的主要内容，如果未能解决你的问题，请参考以下文章