<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext JS in Action Chapter 04 | Listing 4.1 Building toolbars for use in a Panel</title>
<link rel="stylesheet" type="text/css" href="./ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext3/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext3/resources/images/default/s.gif';
Ext.onReady(function() {
var myBtnHandler = function(btn) { // 1
Ext.MessageBox.alert('You Clicked', btn.text);
};
var fileBtn = new Ext.Button({ // 2
text : 'File',
handler : myBtnHandler
});
var editBtn = new Ext.Button({ // 3
text : 'Edit',
handler : myBtnHandler
});
var tbFill = new Ext.Toolbar.Fill(); // 4
var myTopToolbar = new Ext.Toolbar({ // 5
items : [
fileBtn,
tbFill,
editBtn
]
});
var myBottomToolbar = [ // 6
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>'
];
var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});
});
</script>
</body>
</html>
分享到：
相关推荐
压缩包中的"ToolStripControlHostDemo"项目可能包含了一个简单的例子，演示了如何在菜单、工具栏和状态栏中使用`ToolStripControlHost`展示不同类型的WinForm控件，比如`TextBox`、`Button`、`ComboBox`等。...
其中，`Panel`是EXTJS中最基础也是最常用的一个UI组件之一。它主要用于封装其他组件，并提供布局、边框等管理功能。 #### 二、EXTJS Panel 基础用法 在本示例中，我们通过一段简单的HTML代码及JavaScript脚本创建...
在这个例子中，我们创建了一个名为`MyCustomPanel`的新类，它继承自`Ext.panel.Panel`。在`initComponent`方法中，我们添加了一个渲染后的事件监听器。当Panel渲染完成后，会为它的元素（el）绑定click事件。这样，...
在Java中，我们可以使用Swing库来创建丰富的图形用户界面，其中包括面板（Panel）、菜单（Menu）和工具栏（Toolbar）等组件。这些组件构成了一个交互式应用程序的基础框架，下面将详细讲解这三个关键元素。 首先，...
在C# WinForm开发中，有时我们希望创建一个可以自动隐藏和显示的Panel控件，以提供更加灵活的用户界面。这个"自动隐藏的Panel"功能通常用于节省屏幕空间，提高用户体验，尤其在设计类似侧边栏或者工具栏时非常实用。...
8. 工具栏窗口： 该窗口显示所有可用的控件，用户可以双击控件或使用拖曳方式将其放置到工作区。这为用户提供了方便快捷的控件放置方式。 9. 属性窗口： 属性窗口用于显示当前选中控件的所有设置。当用户选择了一个...
在IT行业中，EasyUI是一个基于jQuery的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建用户界面。本文将深入探讨如何使用EasyUI实现Panel的拖动效果，这对于提升用户体验和增强应用程序的交互性至关重要。 ...
在"extjs grid.panel 项目 源码"中，我们可以深入理解如何利用ExtJS构建一个功能完备的数据网格。 Grid Panel是ExtJS中的一个核心组件，它允许开发者以表格的形式展示大量数据，并提供多种交互功能，如排序、分页、...
- 一个简单的例子是创建一个选项卡式的动态Panel，每个选项卡对应一个Panel，用户点击不同选项卡时，动态显示对应的Panel内容。这可以通过监听选项卡的选中事件，然后根据选中项更新Panel的内容来实现。 总之，...
* tbseparator：一个工具栏分隔符组件，用于分隔工具栏项。 * tbspacer：一个工具栏间隔符组件，用于间隔工具栏项。 * tbsplit：一个工具栏拆分按钮组件，用于拆分某些操作。 * tbtext：一个工具栏文本项组件，用于...
Ext Panel是Ext JS框架中的一个核心组件，常用于构建复杂的用户界面，特别是在数据展示和交互方面。本资源“Ext Panel拼揍表格模板.rar”显然包含了关于如何使用Ext Panel创建自定义表格模板的示例和代码。 Ext JS...
在Delphi程序设计中，创建用户界面是至关重要的一步，其中工具栏和状态栏是常见的交互元素。本教程第6章主要介绍了如何在Delphi中制作工具栏和状态栏，以及涉及的一些关键组件属性和事件。 首先，我们关注的是面板...
在Delphi中，面板（Panel）组件是一个基础元素，用于构建和定制用户界面。 1. **BevelOuter 属性**：BevelOuter决定面板组件外部的斜面效果，可以通过调整它来改变面板的视觉样式，让面板边缘呈现出不同类型的斜面...
"admin panel bootstrap后台管理模板"是一个基于Bootstrap的专门用于构建后台管理系统界面的资源包。这个模板包含了多个关键页面和功能，帮助开发者快速搭建具有专业外观和功能的后台管理面板。 1. **基础结构**：...
在本文中，我们将深入探讨EXT JS库中的Panel、Toolbar和Button组件，并通过一个带注释的实作案例来帮助初学者理解这些概念。EXT JS是一个强大的JavaScript库，用于构建富客户端应用程序，它提供了丰富的组件模型和...
在本篇Delphi程序设计教程中，我们主要探讨了如何制作工具栏和状态栏，这是构建用户界面的重要组成部分。在Delphi中，这些组件能够极大地提高应用的交互性和易用性。 首先，我们关注的是面板（Panel）组件，它是...
- 在设计工具中，可以创建浮动的工具箱或属性栏，方便用户在工作区周围自由定位。 - 在多面板的布局中，用户可以根据需要调整各面板的位置，以优化工作空间。 总的来说，可移动的`TPanel`控件增强了Delphi应用程序...
在本文中，我们将深入探讨如何使用C#在Visual Studio 2017中实现一个具有抽屉效果的WinForms左侧导航菜单栏。这个项目对于创建用户界面（UI）丰富的桌面应用程序至关重要，因为它提供了直观的导航功能，使得用户可以...
在这样的文件中，开发者通常会定义一个新的类，继承自Ext.grid.Panel，然后添加额外的功能，如分页和选中状态管理。以下是一些可能的关键点： 1. **扩展GridPanel**: 在JavaScript中，我们使用`Ext.extend`方法创建...