tesia
- 浏览: 32902 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.panel.container.Table',
layout:{
type:'table', //表格布局
columns:4 //设置表格布局默认列数为4列
},
frame:true,
height:150,
width:250,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF',
frame:true,
width:50,
height:50
},
items:[{
title:'子面板一',
width:150,
colspan:3 //设置跨列
},{
title:'子面板二',
rowspan:2, //设置跨行
height:100
},
{ title:'子面板三'},
{ title:'子面板四'},
{ title:'子面板五'}
]
});
});
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.panel.container.Table',
layout:{
type:'table', //表格布局
columns:4 //设置表格布局默认列数为4列
},
frame:true,
height:150,
width:250,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF',
frame:true,
width:50,
height:50
},
items:[{
title:'子面板一',
width:150,
colspan:3 //设置跨列
},{
title:'子面板二',
rowspan:2, //设置跨行
height:100
},
{ title:'子面板三'},
{ title:'子面板四'},
{ title:'子面板五'}
]
});
});
</script>
</head>
<body>
</body>
</html>
- 大小: 10.7 KB
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2052Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1344JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 924服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1039服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 630<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 677<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 424<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 765<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 659<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 930<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1308<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 734Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 508<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 838<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 617函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 473<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 712<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 388Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 944<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 758<!DOCTYPE html PUBLIC " ...
相关推荐
在IT行业中，动态表格布局是一种常见的用户界面设计技术，它允许用户通过拖曳操作来自由地添加、删除和调整表格中的行、列以及单元格，从而实现高度自定义的界面布局。这种技术常用于数据管理和分析应用，因为它能...
### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子，重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架，用于构建交互式的前端...
在"jQuery的表格布局"这个主题中，我们主要关注的是如何利用jQuery和相关技术来创建动态、响应式的表格布局，特别是通过AJAX实现无刷新的数据加载和更新。 首先，表格布局在网页设计中扮演着重要的角色，它用于展示...
本文将深入探讨如何利用Element UI的Form表单组件构建一个高拓展性的表格布局组件。 首先，Element UI的Form组件提供了强大的表单处理能力，它支持各种表单元素如Input、Select、Checkbox、Radio等，并且具有表单...
用Android Studio 2.3.3做的表格布局例子，主要用到、标签，还有android:shrinkColumns="0,1,2"、android:layout_column="0"等设置。
下面将详细介绍如何使用`div`实现表格布局。 首先，我们需要了解`div`元素。`div`（division）是HTML中的一个块级元素，用于组合其他HTML元素，可以通过CSS进行样式控制。它本身没有特定的语义，主要作为容器来组织...
HTML表格布局是网页设计中一个基础且重要的部分，它用于组织和展示数据，如产品目录、数据统计或信息对比。在HTML中，我们使用`<table>`元素来创建表格，结合`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）等标签...
本教程将深入探讨如何使用表格布局（TableLayout）和线性布局（LinearLayout）来实现一个分类工具栏。这两种布局在Android开发中非常常见，各有其特点和适用场景。 首先，线性布局（LinearLayout）是最基础的布局...
虽然基本的表格布局可以通过XML完成，但在某些情况下，可能需要在运行时动态调整表格的布局，比如根据数据变化隐藏或显示列，或者改变列宽。这可以通过Java代码实现，对`TableLayout`和`TableRow`的实例进行操作。 ...
表格布局允许开发者通过`<table>`标签创建表格，用于展示数据或组织页面内容。下面我们将详细讲解表格布局的各个组成部分及使用方法。 1. **表格的基本结构**： 表格由三个主要的元素构成：`<table>`、`<tr>`...
在Android移动应用开发中，表格布局（TableLayout）是一种强大的布局工具，它允许开发者以类似电子表格的方式组织UI元素。TableLayout以其灵活性和可扩展性，成为了创建复杂界面的一种有效方式。下面将详细探讨...
在Android开发中，表格布局管理器（TableLayout）是一种常用且强大的组件，它允许开发者创建类似于HTML中的表格的布局。TableLayout是LinearLayout的扩展，它通过行和列的方式来组织子视图（Views）。本篇学习笔记将...
### Android表格布局详解 在Android开发中，布局是构建用户界面的基础。为了适应不同场景的需求，Android提供了多种布局方式，其中“表格布局”（Table Layout）作为一种常用的布局方式，在处理表格数据展示时尤为...
在Android开发中，表格布局（TableLayout）是一种常用的方式来组织和展示数据，它允许开发者以二维表格的形式排列视图组件，如按钮、文本视图等。表格布局是Android框架中的一个视图组类，继承自LinearLayout，提供...
《表格布局网页》课件是针对网页设计初学者的一份重要的学习资料，主要讲解如何使用表格来布局网页，这是早期网页设计中常见的方法，虽然现在CSS布局已经非常流行，但表格布局仍然在某些场景下被使用。以下是该课件...
应用表格布局管理器实现喜马拉雅的用户登录页面 在 Android 开发中，表格布局管理器是一个非常重要的组件，它可以帮助我们快速地创建复杂的用户界面。在本实验中，我们将使用表格布局管理器来实现喜马拉雅的用户...
在Android开发中，表格布局（TableLayout）是一种常用的布局方式，尤其在展示数据时非常实用。本实例将探讨如何在Android应用中运用表格布局，并通过实际的代码示例来展示其工作原理和实现方法。 首先，`...
在Android开发中，表格布局（TableLayout）是一种常用的布局方式，它允许开发者以二维表格的形式组织用户界面元素。表格布局可以很好地展示数据，特别是在需要显示行列关系时，比如设置一个简单的计算器界面。以下是...
本节我们将深入探讨两种常见的布局方式：帧布局（Frame Layout）和表格布局（Table Layout），这些都是Android开发中不可或缺的基础知识。 **帧布局（Frame Layout）** 帧布局是最基础的布局之一，它的主要特点是...
GTK表格布局源代码是用于构建GUI（图形用户界面）应用程序的一种关键技术，特别是在使用GTK+库的场合。GTK+是一个跨平台的GUI工具包，广泛应用于Linux、Unix、Windows等操作系统上，支持多种编程语言，如C、Python、...