Panel中显示多行工具栏(tbar)

最新推荐文章于 2019-04-06 18:50:31 发布

zhao_yuming

最新推荐文章于 2019-04-06 18:50:31 发布

阅读量1k

点赞数

分类专栏： Js &amp; ExtJs 文章标签：工具 function extjs button border layout

Js & ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ExtJS中实现多行工具栏，通过监听Panel的渲染事件并动态添加多条工具栏，确保面板正常显示。适用于Panel、FormPanel及GridPanel。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加多条工具栏，这样就不会影响页面的显示了。这一方法对Panel，FormPanel，GridPanel都适用。具体代码如下：

Ext.onReady(function() {
			var tbar1 = new Ext.Toolbar([{
						xtype : 'tbtext',
						text : 'Item 1:'
					}, '-', {
						pressed : true,
						text : 'ADD'
					}, '', {
						pressed : true,
						text : 'FIX'
					}, '', {
						pressed : true,
						text : 'DEL'
					}]);
			var tbar2 = new Ext.Toolbar([{
						xtype : 'tbtext',
						text : 'Item 2:'
					}, '-', {
						pressed : true,
						text : 'NEW'
					}, '', {
						pressed : true,
						text : 'OLD'
					}, '', {
						pressed : true,
						text : 'BOTH'
					}]);

			var toolsPanel = new Ext.Panel({
						title : 'A panel',
						border : false,
						tbar : [{
									xtype : 'tbtext',
									text : 'Item 0:'
								}, '-', {
									pressed : true,
									text : 'A button'
								}],
						listeners : {
							'render' : function() {
								tbar1.render(toolsPanel.tbar);
								tbar2.render(toolsPanel.tbar);
							}
						}
					});
			var win = new Ext.Window({
						title : "hello",
						width : 800,
						height : 500,
						layout : "fit"
					});
			// win.add(new Sample.panel.FieldsPanel())
			win.add(toolsPanel);
			win.show();
		});