Ext.onReady(function() {
new Ext.Panel({
renderTo:Ext.getBody(),
title:'面板头部header',
width:500,
height:600,
html:'<h1>面板主区域</h1>',
tbar:[{
pressed:true,
text:'刷新'
}],
bbar:[{
text:'底部工具栏bottomToolbar'
}],
buttons:[{
text:'按钮位于footer'
}]
})
new Ext.Viewport({//可视区域的特殊容器（浏览器可视区域）
//renderTo : Ext.getBody(),//可以不要
enableTabScroll : true,
layout : 'fit',// 自适应布局方式
items : [{
title : '面板',
html : '',
bbar : [{
text : '按钮1',
pressed:true
}, {
text : '按钮2',
pressed:true
}]
}]
})
})
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
request.setAttribute("base", request.getContextPath());
%>
<html>
<head>
<title>面板</title>
<link rel="stylesheet" type="text/css"
href="${base}/script/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="${base}/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
<script type="text/javascript" src="${base}/script/sample/third.js"></script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
在EXTJS中，"Extjs自动最大化panel"是一种高级布局技术，它允许用户创建一个能够自动适应并填充其容器的面板（Panel）。这种特性对于构建响应式和自适应的用户界面至关重要，尤其在现代Web应用中，用户期望界面能够...
例如，如果需要一个简单的单行或单列布局，可以选择FlowLayout；若要创建一个有明确分区的界面，BorderLayout可能是理想选择；对于复杂的网格布局，GridBagLayout提供最大的灵活性。 5. **实例应用** 在实际开发中...
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局
9. **布局与样式**：Grid Panel通常嵌入在一个布局容器中，如Viewport或Border布局。源码会揭示如何设置这些布局，以及如何使用CSS样式调整Grid的外观。 10. **最佳实践**：源码分析也能让我们学习到ExtJS开发的...
以下简要介绍了四种基本布局： 1. **Accordion布局**：这种布局将所有子元素折叠在一个区域内，每次只能展开一个元素。适用于展示一系列可折叠的内容。 2. **Column布局**：Column布局允许你在同一列中按比例或...
虽然文档中只简单提到了名称，但我们可以补充一下： **定义与特性：** - **定义**：表格布局通常用于展示数据表格，其布局方式类似于HTML中的`<table>`标签。 - **特性**： - 支持单元格的合并。 - 支持行和列的...
如果未明确指定 `layout`，默认将使用 `ContainerLayout` 帺类作为布局，这种布局仅简单地将子元素放置到容器中。 #### 6.2 Border 布局 **Border** 布局由类 `Ext.layout.BorderLayout` 定义，其布局名称为 `...
从给定的文件信息来看，我们正在探讨的是ExtJS框架中的布局管理技术。ExtJS是一个用JavaScript编写的开源用户界面库，它提供了大量的组件和工具，用于构建复杂的、响应式的Web应用程序。布局管理是ExtJS的一个核心...
在这个例子中，开发者使用了Ext3.0版本来构建一个包含多个区域（north, south, east, west, center）的Viewport布局，并在其中嵌入了TabPanel作为主要内容区域。 首先，`Ext.BLANK_IMAGE_URL`的设置是为了确保在...
1. **Viewport布局**： - `Ext.Viewport` 是EXTJS中的一个全局对象，用于全屏布局，它会占据浏览器的整个视口。 - 在示例中，`viewport` 的布局有两种类型：`fit` 和 `border`。`fit` 布局适用于只有一个子组件的...
本文将详细介绍ExtJS中的各种布局管理方式，并通过实例来演示如何使用这些布局。 #### 二、ExtJS布局概述 在ExtJS中，布局（Layout）是用来控制容器内子元素排列方式的一种机制。布局决定了容器中每个子项的位置、...
通过结合`phonegap`和其他技术，如`jspdf`（用于生成PDF文件），`CNZZ`统计插件，以及`Ext.js`（一个JavaScript UI框架）中的`Ext.Panel`，`Ext.Viewport`等组件，我们可以创建出功能丰富的、适应各种设备的移动应用...
接下来，我们将详细介绍 ExtJS Panel 的一些常用方法及其应用场景。 1. **setTitle(title)**： - 描述：用于设置 Panel 的标题。 - 示例代码： ```javascript var panel = new Ext.Panel({ title: '初始标题' ...
`Accordion`布局管理着包含在它内部的所有组件（通常是`Ext.container.Container`的子项，如`Ext.Panel`），这些组件在默认情况下会被隐藏，只有当用户点击时才会展开。布局会自动调整每个面板的高度，确保每次只有...
通过设置Viewport，开发者可以轻松管理应用程序的整体布局。 #### 六、TabPanel (页签) TabPanel是ExtJS中非常有用的组件之一，它允许在一个容器中添加多个标签页，每个标签页都可以包含不同的内容。这对于组织复杂...
使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...
4. **Panel（面板）**：Panel是Ext3.0中最基本的布局组件，它可以包含其他组件并定义自己的布局策略。Panel通常用于构建页面的结构，可以设置标题、边框、内边距等属性。 5. **Window（窗口）**：Window组件是一个...
5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady（） 6.2.2 Ext.get（） 6.2.3 Ext.select（） 6.2.4 ...