<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<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(){
Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
var panel = new Ext.Panel({
width: 600,
height: 500,
title: '父面板',
layout: 'border',
renderTo: 'form',
items:[{
title: '面板一',
region: 'north',
height: 100
},{
title: '面板二',
region: 'south',
height: 70
},{
title: '面板三',
region: 'west',
split: true,//可以拉大拉小
collapsible: true,//一点就隐藏一点就出现
width: 150
},{
title: '面板四',
region: 'east',
width: 100
},{
title: '面板五',
region: 'center',
layout: 'border',
items:[{
title: '子面板1',
region: 'west',
width: '50%',
split: true
},{
title: '子面板2',
region: 'center'
}]
}]
});
});
</script>
</HEAD>
<body id="form">
</body>
</HTML>
分享到：
相关推荐
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
在CSS世界中，`border-radius`属性是一个非常重要的特性，它允许我们为元素添加圆角效果，从而使得设计更加精致和现代。然而，在实际开发中，我们可能会...在面对复杂的布局时，理解CSS的工作原理和相互关系尤为重要。
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
在WPF（Windows Presentation Foundation）中，`Border`控件是一种基本元素，常用于为其他UI元素添加边框。在创建具有个性化外观的应用程序时，我们可能会遇到需求，希望为`Border`的四个边设置不同的颜色。标题"wpf...
ext2+,树,tree,布局,border
EXT的强大之处在于其灵活性和组件的可扩展性，你可以根据项目需求对布局稍作调整，比如改变区域大小、添加自定义组件或调整布局参数，从而实现更多样化的界面设计。 这个名为“简单布局”的压缩包文件可能包含了...
盒模型是理解CSS布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。流体布局则利用百分比实现元素的自适应宽度，适合不同屏幕尺寸的设备。响应式布局则更进一步，通过媒体查询@media...
《CSS商业网站布局之道》是针对CSS初学者的一份宝贵资源，主要讲解如何利用CSS进行高效、美观且适应商业需求的网页布局设计。CSS（层叠样式表）是网页设计的核心技术之一，它负责控制网页的外观和布局，使得我们可以...
常用的布局控件包括Canvas、StackPanel、WrapPanel、DockPanel、Grid、UniformGrid、ViewBox、Border和ScrollViewer等。布局控件通过测量和排列子元素来确定它们在屏幕上的位置和大小。其中，`Margin`和`Padding`...
4. 盒模型属性：`width`、`height`、`padding`、`border`、`margin`是盒模型的主要属性，它们影响元素的大小和位置。理解这些属性对于精确布局至关重要。 5. 定位技术：`position`属性（static、relative、absolute...
3. **盒模型**：理解CSS布局的基础是盒模型，每个HTML元素都可视为一个矩形的盒子，包含边距（margin）、边框（border）、填充（padding）和内容区域。盒模型决定了元素占据的空间及其与其他元素的关系。 4. **定位...
这种布局方式在早期网页设计中十分常见，但在现代网页设计中，为了实现更复杂和灵活的页面布局，已经逐渐被相对定位、绝对定位、Flexbox和Grid等技术取代。 尽管如此，理解并掌握静态布局仍然是非常重要的，因为它...
本篇文章将深入探讨Ext中常用的两种布局：Fit布局和Border布局，为初学者提供详细的指导。 首先，我们来看Fit布局。Fit布局主要用于那些需要完全填充容器空间的场景。它只有一个子组件可以展示，并且该子组件会自动...
因此，在布局管理器中正确处理边框是非常重要的。 7. **Java图片边框**： - `MatteBorder`可以使用图片作为边框，例如：`new MatteBorder(5, 5, 5, 5, myImage)`。这在创建自定义视觉效果时非常有用。 8. **代码...
在探讨“table中的border-collapse属性”这一主题时，我们深入剖析了CSS中这一关键属性的运作机制及其对表格布局的影响。border-collapse属性是CSS中用于控制表格边框表现的重要属性，它决定了表格单元格（td）之间...
5. **圆角与阴影**：CSS3引入了圆角边框（border-radius）和阴影（box-shadow）特性，使得网页设计更具现代感。书中会详细阐述如何利用这些特性创建美观的UI元素。 6. **浏览器兼容性**：考虑到实际开发中需要考虑...
本文将深入探讨四种常用的布局容器：StackPanel、Border、WrapPanel和DockPanel，帮助你更好地理解和运用这些布局策略。 1. **StackPanel**： StackPanel是最基础的布局容器之一，它允许你按垂直或水平方向堆叠子...
本篇文章将深入探讨“Border布局”，一种强大的布局模式，由类`Ext.layout.BorderLayout`定义，常用于创建复杂的多面板应用。 一、Border布局详解 Border布局将容器分为五个主要区域，分别是： 1. **North（北区...