`

ext--panel

    博客分类：
  • Ext
ext 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>panel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link rel="stylesheet" type="text/css"
			href="../ext/resources/css/ext-all.css">
		<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../ext/ext-all.js"></script>
		<script type="text/javascript">
		Ext.onReady(function(){
			// 定义顶部工具栏
			var topToolbar = new Ext.Toolbar(
				{
					buttons:[
						{
							text:"新建",
							icon:"../ext/resources/images/default/dd/drop-add.gif",//按钮前加图片
							cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
							handler:function(){
								Ext.Msg.alert("","新建文件！");
							}
						},
						{
							xtype:"tbsplit"//分隔符(tbseparator(-),tbspacer(空格),tbfill(->),tbsplit(带菜单，会显示一个向下的箭头)
						},
						{
							text:"打开"
						},
						{
							xtype:"tbspacer"//显示在右边
						},
						{
							text:"保存"
						},
						{
							text:"退出"
						}
					]
				}
			);
			
			// 定义底部工具栏
			var bottomToolBar = new Ext.Toolbar(
				{
				buttons:[
					"->",
					{
						text:"上一步",
						icon:"../ext/resources/images/default/dd/drop-add.gif",//按钮前加图片
						cls:"x-btn-text-icon",//为图片预留位置，不然会把文字覆盖掉。
						handler:function(){
							Ext.Msg.alert("","回到上一步操作！");
						}
					},
					"->",
					{
						text:"下一步",
						icon:"../ext/resources/images/default/dd/drop-yes.gif",
						cls:"x-btn-text-icon",
						handler:function(){
							Ext.Msg.alert("","进入下一步操作！");
						}
					},
					"->",
					{
						text:"退出"
					}
				]
				}
			);
			
			// 定义一个面板。面板由标题栏、顶部工具栏、底部工具栏、footer(放置确定、取消之类的按钮)、面板区域组成。
			var panel = new Ext.Panel(
				{
					title:"面板标题",
					width:"800",//面板宽度
					titleCollapse:true,//标题可以收缩
					collapsible:true,//面板可以收缩
					html:"installing and starting the script debuggerusing the script debugger with microsoft® visual studio™ 98 in general, you should not install the script debugger if you have already installed visual studio 98 or any of its component products such as microsoft® visual interdev™ or microsoft® visual j++™. visual studio includes its own debugger that you can use to debug scripts and java components. if you install the script debugger after installing any visual studio products and you will no longer be able to start the visual studio debugger in response to errors reported by internet explorer 4.0.using the correct version microsoft script debugger works with microsoft internet explorer 4.0 or with internet information server 4.0. because the script debugger is designed to be generic across script hosts, setup does not check for specific versions of products being installed, so you must ensure that you are running the correct versions of these products. if you attempt to use the script debugger with earlier versions of internet explorer (such as internet explorer 3.0 or the platform preview release of internet explorer 4.0), or with earlier versions of internet information server, the debugger will not work and could disrupt iis service.uninstalling previous versions of the script debugger if you installed the script debugger for internet explorer 3.0, you must uninstall that version before proceeding with this installation.uninstalling iis if you uninstall internet information server 4.0, the uninstall process will also remove the script debugger, even if you installed the script debugger separately. you can reinstall the script debugger by running the iis installation and choosing to install just the script debugger.",//面板显示的内容
					renderTo:"mydiv",//面板放置位置。
					tbar:topToolbar,
					bbar:bottomToolBar,
					// 标题栏右侧可以放置一排按钮，像最大化，最小化，关闭等。通常是图标，没有文字。
					//下面的id(通过id显示相应的图标)可以是这些：toggle,close,mimimize,maximize,gear,pin,unpin,right,left,up,down,refresh,minus,plus,
					//help,search,save,print
					tools:[
						{
							id:"refresh",//刷新
							handler:function(e,toolEl,p){//toolEl:按钮本身，p:panel
								// 从指定的位置获取数据，script为true表示执行script脚本。
								p.getUpdater().update({url:"http://www.baidu.com",script:true});
							}
						},
						{
							id:"up",
							handler:function(e,toolEl,p){
								p.collapse(true);//收缩面板
							}
						},
						{
							id:"down",
							handler:function(e,toolEl,p){
								p.expand(true);//展开面板
							}
						},
						{
							id:"help",
							handler:function(e,toolEl,p){
								Ext.Msg.alert("提醒","版权所有，侵权必究！");
							}
						},
						{
							id:"maximize",//最大化
							handler:function(e,toolEl,p){
								//
							}
						}
						,{
							id:"close",
							handler:function(e,toolEl,p){
								p.hide();//隐藏面板
							}
						}
					]
				}
			);
		});
	</script>

	</head>

	<body>
		<div id="mydiv"></div>
	</body>
</html>



分享到：
| ext--表单验证
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext-base.js

    xtype: 'panel', html: '这是EXT的第一个窗口！' }] }).show(); } }); ``` 四、EXT的CSS文件 EXT框架中的CSS文件与"ext-base.js"紧密配合，用于定义组件的样式和视觉效果。EXT提供了默认的CSS样式，但开发者...

    EXT-JS Grid 用法

    2. 添加Grid组件：在设计面板中，从组件库选择“Grid Panel”拖放到工作区。Grid组件会自动添加到你的应用程序布局中。 3. 设计列结构：双击Grid组件打开其属性面板，这里可以定义列的配置。例如，添加新的列，设置...

    ext-1.0源码+部分中文解读

    Panel是EXT-1.0中的基础容器，可以容纳其他组件并进行布局。Window则是一种弹出式Panel，常用于对话框或浮窗。 10. **中文解读** 对于EXT-1.0的中文解读部分，可能包括对源码的注释、关键函数的解释，以及如何在...

    ext-4.1.1a

    例如，`Ext.container.Viewport`用于定义整个浏览器窗口的内容，`Ext.grid.Panel`用于创建数据网格，`Ext.window.Window`则可以创建弹出式窗口。 2. **数据绑定**：在4.1.1a版本中，ExtJS强化了数据绑定功能，使得...

    ext-grid+json简单应用

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 将Grid渲染到页面上 }); ``` 在描述中提到的".sql脚本"可能用于创建数据库表结构和填充测试数据。在...

    前端组件ext-4.2.1-gpl.zip

    它包括但不限于表格（Grid）、面板（Panel）、窗口（Window）、菜单（Menu）、按钮（Button）、表单（Form）、树形视图（Tree）、图表（Charts）等，这些组件设计精美且易于定制，能够满足各种界面设计需求，为用户...

    ext-2.3.0jar包

    `Ext.Panel`则是一个通用容器，可以包含其他组件，通常用作应用程序的基础结构。 在EXTJS 2.3.0版本中，布局管理器是另一个重要的知识点。布局管理器负责调整和定位组件，常见的布局类型有“fit”（适合）、...

    ext-4.1.1API

    1. **组件系统**：EXTJS的核心是其组件系统，它包括各种预定义的UI组件，如表格（Grid）、树形视图（Tree）、面板（Panel）、表单（Form）、菜单（Menu）等。这些组件可以组合和自定义，以满足各种复杂界面的需求。 ...

    extjs--ext-3.2.1

    它提供了一系列预定义的UI组件，如表格（Grid）、树形视图（Tree）、面板（Panel）、窗口（Window）等，开发者可以方便地组合这些组件来构建复杂的用户界面。 2. **数据绑定**：ExtJS的数据绑定机制允许UI组件与...

    ext-6.2.0-gpl

    2. **Form Panel**：包含多种输入控件，如文本框、下拉列表等，方便用户输入和编辑数据。 3. **Tree Panel**：适用于展示层次结构数据，如组织架构、文件系统等。 4. **Chart**：提供丰富的图表类型，如柱状图、折线...

    ext-cn-js-beta

    - **组件API**：从按钮（Button）到面板（Panel），再到窗口（Window）和菜单（Menu），EXT的API文档涵盖了所有组件的详细信息，包括属性、方法和事件。 4. **EXT JS应用开发实践** - **布局设计**：学习如何根据...

    ext-----中文字体处理

    var panel = Ext.create('Ext.Panel', { title: 'EXT中文标题', html: 'EXT中文内容', style: { 'font-family': '宋体' } }); ``` 这里，我们创建了一个面板，并设置了它的字体为"宋体"。 EXT还支持动态加载...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    var panel = Ext.create('Ext.Panel', { items: [iframe] }); ``` 2. **使用自定义布局**：如果我们发现ExtJS的内置布局无法满足需求，可以自定义布局。创建一个布局管理器，它能根据IFrame的实际高度来调整...

    ext-ux-grid-gridviewmenuplugin

    在Ext JS中，`GridView`是`Ext.grid.Panel`的一个组成部分，负责渲染表格的行和列。而`GridViewMenuPlugin`则扩展了`GridView`的功能，将菜单与表格视图紧密结合，使得在表格上下文菜单中可以触发特定的操作或显示...

    ext-fckeditor整合

    这通常涉及到定义一个EXT的Panel或FieldSet，并在其配置项中设置FCKeditor的初始化代码。 3. **配置FCKeditor**：FCKeditor有很多可配置的选项，如语言设置、工具栏布局、字体样式等。这些配置可以通过JavaScript...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    例如，`Ext.Panel`是框架中的一个核心组件，用于创建带有标题、边框和可选项卡的容器。`Ext.grid.GridPanel`则是一个数据展示组件，常用于表格数据的展示和操作。每个类都详细说明了其构造函数、配置选项、事件处理...

    ext-3.2-beta_6256-157.zip

    1. **组件（Components）**：了解基本组件，如Panel、Window、FormField等，并学会如何配置它们的属性。 2. **数据绑定（Data Binding）**：理解Store、Model和Proxy的概念，以及如何通过它们与服务器进行数据交换。...

    EXT - 2011-5-30

    1. **基础类的使用**：EXT的核心是其强大的组件模型，包括基本的Panel、Window、Button等。学习基础类的使用是掌握EXT的关键，这涵盖了组件的创建、配置、事件处理等方面。 2. **Form**：EXT提供了完整的表单处理...

    ext-4.0.7压缩包

    3. **Grid Panel**：EXT的表格组件功能强大，支持多列排序、分页、行选择、编辑等功能，可以处理大量数据并提供良好的用户体验。 4. **Form Components**：EXT提供了丰富多样的表单组件，如文本框、下拉框、日期...

    ext-2.0.2-aspx-only-aspx-examples

    1. **ExtJS 2.0.2 API**: 了解该版本提供的所有类、方法和配置选项，如Ext.Component、Ext.Panel、Ext.grid.GridPanel等。 2. **ASP.NET与JavaScript集成**: 学习如何在ASP.NET页面中嵌入和初始化ExtJS脚本，以及...

Magicbox
Global site tag (gtag.js) - Google Analytics