感觉Ext好像和Swing好像啊，它的容器啊，布局啊，监听器什么的，也许当初开发Ext的时候就是参考了Swing的设计吧！看官方的api时，发现关于容器的操作有好多的属性可供选择的，一口气把它们看完了，对各个属性大概的了解了下！下面是一些示例代码，基本上是访api里面的例子写的！留个示供以后参考！
Container:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01.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="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create("Ext.container.Container",{
layout: "hbox",//布局
width:500,
border:1,
renderTo:Ext.getBody(),//指明上层容器
style: {borderColor:"#f00", borderStyle:"solid", borderWidth:"1px"},
defaults: {
xtype: "datefield",//默认的组件类型
labelWidth: 100,
style: {
padding:"10px"
}
},
items: [{
xtype: "datefield",
name: "startDate",
fieldLabel: "start Date"
},{
xtype: "datefield",
name: "endDate",
fieldLabel: "end Date"
}]
});
});
</script>
</head>
<body>
</body>
</html>
Viewport:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01.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="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create("Ext.container.Viewport",{
layout: "border",//布局,单个容器可以使用fit来填满窗口，当需要将当前容器突显的时候可以使用card
width:500,
renderTo:Ext.getBody(),//指明上层容器
items: [{
region: "north",
html: "<h2>Hello World!</h2>",
autoHeight: true,
border: false
},{
region: "west",
title: "navigation",
width: 200,
collapsible: true//是否有隐藏的小三角形按钮
},{
region: "east",
title: "east",
width: 200
},{
region: "center",
title: "default panel",
items: {
title: "default tab",
html: "others can add dynamicly!"
}
},{
region: "south",
title: "south",
height: 200
}]
});
});
</script>
</head>
<body>
</body>
</html>
ButtonGroup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03_ButtonGroup.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="./styles.css">-->
<link rel="stylesheet" type="text/css" href="/ext/ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/ext4/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'Panel with ButtonGroup',
width: 300,
height:200,
renderTo: document.body,
html: 'HTML Panel Content',
tbar: [{//topBar，相当于顶部的工具栏
xtype: 'buttongroup',
columns: 3,
title: 'Clipboard',
items: [{
text: 'Paste',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton',
text: 'Menu Button',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{text: 'Menu Item 1'}]
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
}]
});
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
分享到：
相关推荐
标题“GXT组件使用教程2——Auto Height Grid”指的是一个关于如何在GXT应用中实现自动高度调整的表格网格组件的教学。这个功能允许表格根据其内容自动调整高度，无需开发者手动设置固定的高度值。这对于显示不确定...
extend: 'Ext.container.Viewport', items: [{ xtype: 'button', text: 'Click me!', plugins: [{ ptype: 'tiplite', tooltip: '这是一个使用TipLite的按钮提示！' }] }], ... }); ``` 5. **高级用法**...
Ext树的核心组件是`Ext.tree.Panel`，它继承自`Ext.container.Container`。这个面板包含了树的所有节点，并提供了一种可交互的方式来显示和操作这些节点。树的每个节点通常由`Ext.tree.Node`对象表示，包含了节点的...
"Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架，用于构建富互联网应用程序（RIA），它提供了一套完整的组件化开发工具，包括...
7.4.3 数据模型的骨架——字段：ext.data.field / 330 7.4.4 数据集：ext.util.abstractmixedcollection与ext.util.mixedcollection / 330 7.4.5 数据验证及错误处理：ext.data.validations与ext.data.errors / ...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
### Extjs4 API文档阅读（三）——布局和容器 #### 一、容器与基本概念 在Ext JS中，容器(Container)是一种特殊的组件，能够容纳其他组件。这使得Ext JS非常灵活，能够构建复杂的用户界面。容器是构成Ext JS应用...
除了基本的 `GridPanel` 外，Ext JS 还提供了一个更为强大的表格组件——`EditorGridPanel`。这个组件允许用户直接在表格中进行数据编辑。下面是一个简单的使用 `EditorGridPanel` 的示例： ```javascript Ext....
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
在本次的“Ext JS 培训资料”中，我们将深入探讨其中的核心组件——Panel（面板），它在Ext JS开发中扮演着至关重要的角色。 Panel是Ext JS中最常用的控件之一，它是一种容器，可以用来展示特定的HTML信息，并且...
var panel = Ext.create('Ext.container.Viewport', { items: [{ xtype: 'container', layout: 'fit', // 使用适合布局 items: [{ xtype: 'component', tpl: template, data: data, style: 'text-align: ...
《Solaris开源了——Solaris 10 VS Linux 2．6开源兄弟大比拼》这篇文章探讨了两个操作系统之间的竞争，主要围绕Solaris 10和Linux 2.6在软件性能、系统安全、硬件支持、文件系统、集群技术和系统虚拟化六个方面的...
在EXTJS中，有一种特殊的组件——容器(Container)，它能够包含其他组件，负责管理子组件的生命周期。 容器通过items属性配置其子组件，可以是已创建的组件实例，也可以是通过xtype指定类型延迟实例化的组件。例如，...
例如，你可能需要在`launch`方法中设置默认的启动页面，并在`openPage`方法中使用`Ext.container.Viewport`的`setActiveItem`方法来切换显示的页面。 除了基本的布局和组件配置，Sencha Architect还支持更高级的...
2. handsontable的基本使用： 在HTML中引入handsontable的JS和CSS文件，然后在JavaScript中创建handsontable实例，指定容器元素和初始数据。例如： ```html <div id="example"></div> ``` ```javascript var ...