hnhnhnhnhn
- 浏览: 77140 次
-
文章分类
最新评论
-
angryfrank：
收获良多，赞
ExtJS4学习笔记十－－Grid使用 -
万俟辉夜：
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信 ...
ExtJS4学习笔记十－－Grid使用 -
endual：
请问博主，我是用mvc的，请问form.panel怎么绑 ...
ExtJS4学习笔记九－－数据模型的使用 -
365353650：
<%@ page language="java ...
ExtJS4学习笔记九－－数据模型的使用 -
binjoo：
有password类型的文本框??
ExtJS4学习笔记二－－表单控件相关
标准面板：
面板加载远程页面：
面板加载本地资源：
使用html配置项自定义面板内容：
使用items配置项添加单一组件示例：
使用items配置项添加多个组件示例：
Ext.layout.container.Auto布局示例：
Ext.layout.container.Fit布局示例：
Ext.layout.container.Accordion布局示例：
Ext.layout.CardLayout布局示例:
百分比（Percentage）定位示例:
偏移值（Offsets）定位:
参考边（Sides）定位:
Ext.layout.container.Absolute布局示例:
指定固定列宽示例:
使用百分比指定列宽:
固定值与百分比结合使用:
Ext.layout.container.Table布局示例:
Ext.layout.container.Border布局示例:
Ext.layout.container.HBox布局示例:
Ext.container.Viewport示例:
Ext.tab.Panel示例:
Ext.tab.Panel示例（动态添加tab页）:
Ext.create('Ext.panel.Panel',{
title:'面板头部（header）',
tbar : ['顶端工具栏(top toolbars)'],
bbar : ['底端工具栏(bottom toolbars)'],
height:200,
collapsible : true,
collapseDirection : 'left',
width:300,
frame:true,
renderTo: Ext.getBody(),
bodyPadding: 5,
bodyStyle:'background-color:#FFFFFF',
html:'面板体（body）',
tools : [
{id:'toggle'},
{id:'close'},
{id:'maximize'}
],
buttons:[{
text:'面板底部（footer）'
}]
});
面板加载远程页面：
Ext.create('Ext.panel.Panel',{
title:'面板加载远程页面',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
autoScroll : true,//自动显示滚动条
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
bodyPadding: 5,
autoLoad :'page1.html',//自动加载面板体的默认连接
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});
面板加载本地资源：
<HTML>
<HEAD>
<TITLE>面板加载本地资源</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'面板加载本地资源',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
autoScroll : true,//自动显示滚动条
renderTo: Ext.getBody(),
bodyPadding: 5,
contentEl :'localElement',//加载本地资源
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<table border=1 id='localElement'>
<tr><th colspan=2>本地资源---员工列表</th></tr>
<tr>
<th width = 60>序号</th><th width = 80>姓名</th>
<tr>
<tr><td>1</td><td>张三</td></tr>
<tr><td>2</td><td>李四</td></tr>
<tr><td>3</td><td>王五</td></tr>
<tr><td>4</td><td>赵六</td></tr>
<tr><td>5</td><td>陈七</td></tr>
<tr><td>6</td><td>杨八</td></tr>
<tr><td>7</td><td>刘九</td></tr>
</table>
</BODY>
</HTML>
使用html配置项自定义面板内容：
var htmlArray = [
'<table border=1>',
'<tr><td colspan=2>员工列表</td></tr>',
'<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',
'<tr><td>1</td><td>张三</td></tr>',
'<tr><td>2</td><td>李四</td></tr>',
'<tr><td>3</td><td>王五</td></tr>',
'<tr><td>4</td><td>赵六</td></tr>',
'<tr><td>5</td><td>陈七</td></tr>',
'<tr><td>6</td><td>杨八</td></tr>',
'<tr><td>7</td><td>刘九</td></tr>',
'</table>'
];
Ext.create('Ext.panel.Panel',{
title:'使用html配置项自定义面板内容',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
autoScroll : true,//自动显示滚动条
renderTo: Ext.getBody(),
bodyPadding: 5,
html:htmlArray.join(''),
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});
使用items配置项添加单一组件示例：
Ext.create('Ext.panel.Panel',{
title:'日历',
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
width : 200,
bodyPadding: 5,
items: [{//向面板中添加一个日期组件
xtype: 'datepicker',
minDate: new Date()
}]
});
使用items配置项添加多个组件示例：
<HTML>
<HEAD>
<TITLE>使用items配置项添加多个组件示例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'使用items进行面板嵌套',
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
height : 200,
width : 250,
renderTo: Ext.getBody(),
bodyPadding: 5,
layout : 'vbox',
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色
collapsible : true,//允许展开和收缩
width : 230,
autoScroll : true//自动显示滚动条
},
items: [{
title : '嵌套面板一',
height : 80,//子面板高度为80
contentEl : 'localElement'//加载本地资源
},{
title : '嵌套面板二',
autoLoad : 'page1.html'//加载远程页面
}]
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<table border=1 id='localElement'>
<tr><th colspan=2>本地资源---员工列表</th></tr>
<tr>
<th width = 60>序号</th><th width = 80>姓名</th>
<tr>
<tr><td>1</td><td>张三</td></tr>
<tr><td>2</td><td>李四</td></tr>
<tr><td>3</td><td>王五</td></tr>
</table>
</BODY>
</HTML>
Ext.layout.container.Auto布局示例：
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Auto布局示例',
frame:true,//渲染面板
width : 250,
renderTo: Ext.getBody(),
bodyPadding: 5,
layout : 'auto',//自动布局
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
},
//面板items配置项默认的xtype类型为panel，
//该默认值可以通过defaultType配置项进行更改
items: [{
title : '嵌套面板一',
html : '面板一'
},{
title : '嵌套面板二',
html : '面板二'
}]
});
Ext.layout.container.Fit布局示例：
Ext.create('Ext.panel.Panel',{
layout : 'fit',
title:'Ext.layout.container.Fit布局示例',
frame:true,//渲染面板
height : 150,
width : 250,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
},
//面板items配置项默认的xtype类型为panel，
//该默认值可以通过defaultType配置项进行更改
items: [{
title : '嵌套面板一',
html : '面板一'
},{
title : '嵌套面板二',
html : '面板二'
}]
})
Ext.layout.container.Accordion布局示例：
Ext.create('Ext.panel.Panel',{
layout:'accordion',
title:'Ext.layout.container.Accordion布局示例',
frame:true,//渲染面板
height : 150,
width : 250,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
title : '嵌套面板一',
html : '说明一'
},{
title : '嵌套面板二',
html : '说明二'
},{
title : '嵌套面板三',
html : '说明三'
}]
});
Ext.layout.CardLayout布局示例:
var panel = Ext.create('Ext.panel.Panel',{
layout : 'card',
activeItem : 0,//设置默认显示第一个子面板
title:'Ext.layout.container.Card布局示例',
frame:true,//渲染面板
height : 150,
width : 250,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
},{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}],
buttons:[{
text : '上一页',
handler : changePage
},{
text : '下一页',
handler : changePage
}]
});
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
百分比（Percentage）定位示例:
Ext.create('Ext.panel.Panel',{
layout : 'anchor',
title:'Ext.layout.container.Anchor布局示例',
frame:false,//渲染面板
height : 150,
width : 300,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
anchor : '50% 50%',//设置子面板的宽高为父面板的50%
title : '子面板'
}]
});
偏移值（Offsets）定位:
Ext.create('Ext.panel.Panel',{
layout : 'anchor',
title:'Ext.layout.container.Anchor布局示例',
frame:false,//渲染面板
height : 150,
width : 300,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素
title : '子面板'
}]
});
参考边（Sides）定位:
Ext.create('Ext.panel.Panel',{
layout : 'anchor',
title:'Ext.layout.container.Anchor布局示例',
autoScroll : true,//自动显示滚动条
frame:false,//渲染面板
height : 150,
width : 300,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
width : 200,
height : 100,
title : '子面板'
}]
});
Ext.layout.container.Absolute布局示例:
Ext.create('Ext.panel.Panel',{
layout : 'absolute',
title:'Ext.layout.container.Absolute布局示例',
frame:false,//渲染面板
height : 150,
width : 300,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
frame : true,
height : 70,
width : 100,
bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
},
items: [{
x : 10,//横坐标为距父容器左边缘90像素的位置
y : 10,//纵坐标为距父容器上边缘10像素的位置
html : '子面板一',
title : '子面板一'
},{
x : 130,//横坐标为距父容器左边缘130像素的位置
y : 40,//纵坐标为距父容器上边缘40像素的位置
html : '子面板二',
title : '子面板二'
}]
});
指定固定列宽示例:
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout : 'column',
frame:true,//渲染面板
height : 150,
width : 250,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
height : 100,
frame : true
},
items: [{
title:'子面板一',
width:100//指定列宽为100像素
},{
title:'子面板二',
width:100//指定列宽为100像素
}]
});
使用百分比指定列宽:
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout : 'column',
frame:true,//渲染面板
height : 150,
width : 250,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
height : 100,
frame : true
},
items: [{
title:'子面板一',
columnWidth:.3//指定列宽为容器宽度的30%
},{
title:'子面板二',
columnWidth:.7//指定列宽为容器宽度的70%
}]
});
固定值与百分比结合使用:
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Column布局示例',
layout : 'column',
frame:true,//渲染面板
height : 150,
width : 350,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
height : 100,
frame : true
},
items: [{
title:'子面板一',
width : 100//指定列宽为100像素
},{
title:'子面板二',
columnWidth:.3//指定列宽为容器剩余宽度的30%
},{
title:'子面板三',
columnWidth:.7//指定列宽为容器剩余宽度的70%
}]
});
Ext.layout.container.Table布局示例:
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.Table布局示例',
layout : {
type : 'table',//表格布局
columns : 4 //设置表格布局默认列数为4列
},
frame:true,//渲染面板
height : 150,
width : 210,
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:'子面板五'}]
});
Ext.layout.container.Border布局示例:
Ext.create('Ext.panel.Panel',{
title : 'Ext.layout.container.Border布局示例',
layout:'border',//边框布局
height : 250,
width : 400,
frame : true,
renderTo: Ext.getBody(),
defaults : {//设置默认属性
collapsible : true
},
items: [{
title: 'north Panel',
html : '上边',
region: 'north',//指定子面板所在区域为north
height: 50
},{
title: 'South Panel',
html : '下边',
region: 'south',//指定子面板所在区域为south
height: 50
},{
title: 'West Panel',
html : '左边',
region:'west',//指定子面板所在区域为west
width: 100
},{
title: 'east Panel',
frameHeader : true,
frame : false,
html : '右边',
region:'east',//指定子面板所在区域为east
width: 100
},{
title: 'Main Content',
html : '中间',
region:'center'//指定子面板所在区域为center
}]
});
Ext.layout.container.HBox布局示例:
Ext.create('Ext.panel.Panel',{
title : 'Ext.layout.container.HBox布局示例',
layout:{
type : 'hbox',//水平盒布局
align : 'stretch'//子面板高度充满父容器
},
height : 150,
width : 300,
frame : true,
renderTo: Ext.getBody(),
items: [{
title: '子面板一',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板二',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板三',
flex : 2,
html : '1/2宽(flex=2)'
}]
});
Ext.container.Viewport示例:
Ext.create('Ext.container.Viewport',{
layout:'border',//表格布局
items: [{
title: 'north Panel',
html : '上边',
region: 'north',//指定子面板所在区域为north
height: 100
},{
title: 'West Panel',
html : '左边',
region:'west',//指定子面板所在区域为west
width: 150
},{
title: 'Main Content',
html : '中间',
region:'center'//指定子面板所在区域为center
}]
});
Ext.tab.Panel示例:
Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例',
frame : true,
height : 150,
width : 300,
activeTab : 1,//默认激活第一个tab页
renderTo: Ext.getBody(),
items: [
{title: 'tab标签页1',html : 'tab标签页1内容'},
{title: 'tab标签页2',html : 'tab标签页2内容'},
{title: 'tab标签页3',html : 'tab标签页3内容'},
{title: 'tab标签页4',html : 'tab标签页4内容'},
{title: 'tab标签页5',html : 'tab标签页5内容'}
]
});
Ext.tab.Panel示例（动态添加tab页）:
var tabPanel = Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例（动态添加tab页）示例',
frame : true,
height : 150,
width : 300,
activeTab : 0,//默认激活第一个tab页
renderTo: Ext.getBody(),
items : [{
title: 'tab标签页1',
html : 'tab标签页1内容'
}],
buttons : [{
text : '添加标签页',
handler : addTabPage
}]
});
function addTabPage(){
var index = tabPanel.items.length + 1;
var tabPage = tabPanel.add({//动态添加tab页
title: 'tab标签页'+index,
html : 'tab标签页'+index+'内容',
closable : true//允许关闭
})
tabPanel.setActiveTab(tabPage);//设置当前tab页
}
分享到：
评论
1 楼
SHUIMOMO
2011-12-15
请问，我在form panel中连续放了几个button，这几个按钮之间几乎一点间距空隙也没有。
用表格布局也不行，有什么办法解决吗？
您遇到过么……
用表格布局也不行，有什么办法解决吗？
您遇到过么……
发表评论
-
ExtJS4学习笔记十一 树控件的使用
2011-09-01 16:17 3227一、树面板简单示例 var ... -
ExtJS4学习笔记十－－Grid使用
2011-09-01 15:24 16247一、grid的例： //配置表 ... -
ExtJS4学习笔记九－－数据模型的使用
2011-09-01 14:43 61541、创建Ext.data.Model数据 ... -
ExtJS4学习笔记八－－Template的使用
2011-09-01 14:21 54421、append方法 var tpl = new Ext.Te ... -
ExtJS4学习笔记七－－事件绑定相关
2011-09-01 11:27 5968一、addListener方法 var button = Ex ... -
ExtJS4学习笔记六－－一些小知识点
2011-09-01 09:31 49341、获取页面上的HTML元素，并进行处理，使用Ext.get( ... -
ExtJS4学习笔记四－－图片上传
2011-08-31 15:51 3979前端程序： <HTML> <HEAD&g ... -
ExtJS4学习笔记三－－远程访问数据源示例
2011-08-31 15:10 3301前端页面： <HTML> <HEAD&g ... -
ExtJS4学习笔记二－－表单控件相关
2011-08-31 14:29 11394二、表单部分相关 <HTML> <HEA ... -
ExtJs4学习笔记一－－基础知识
2011-08-31 11:42 5601开始学习ExtJs4，陆续记录学习过程，希望有所用处： 特别注 ...
相关推荐
【ExtJs 2.1学习笔记】主要涵盖了ExtJs框架的核心概念、组件使用以及数据通信等方面的知识点。以下是对这些内容的详细解析： 1. **ExtJs 结构树**：这部分内容介绍了ExtJs的组件层次结构，包括如何组织和嵌套组件，...
### ExtJS面板学习笔记 #### 一、基础：弹出框 在ExtJS中，`Ext.MessageBox`提供了创建各种模态对话框的功能，包括提示、确认、输入等。以下是几个基本示例： 1. **简单警告对话框**： ```javascript Ext....
本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中，应用程序通常基于组件树构建，每个组件都有自己的属性、方法和事件。理解这种结构对于布局...
### ExtJs 学习笔记知识点总结 #### 一、初识 ExtJs ##### 1.1 入门 - **背景介绍**： - **ExtJs**：一款强大的JavaScript库，用于构建现代化的Web应用程序。它提供了一系列丰富的UI组件、布局管理器以及数据...
本资源包包含了与ExtJS 3.4相关的学习资料，包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`，旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...
根据给定的文件信息，我们可以深入探讨两个关键的Extjs组件——Tab Panel（标签页控件）和Grid（表格控件）。这两个控件是Extjs框架中非常实用且功能丰富的部分，广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...
这个学习笔记涵盖了从基础到高级的多个主题，帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明： 1. **ExtJs 结构树**：这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树，包括...
本笔记源码主要展示了如何在ExtJS 4中运用MVC模式进行开发。 一、MVC模式 MVC模式将应用分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。模型处理数据和业务逻辑，视图负责显示用户界面，...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
#### 二、获取ExtJS4并搭建学习环境 ##### 获取ExtJS4 首先，你需要从官方资源或可信赖的第三方资源下载ExtJS4。推荐访问`http://extjs.org.cn/`获取最新版本的发布包，这包括了必要的文件和API文档，对初学者非常...
本资源包含ExtJs的API文档、笔记以及示例，帮助开发者深入理解和使用ExtJs。 首先，API文档是ExtJs开发的基础，其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考，有助于开发者...
开发者在学习过程中不仅要理解文档，还应该结合实际的开发笔记和个人学习笔记，对所学知识进行实际的编码操作和问题解决实践。这些笔记通常包含了他人在开发过程中遇到的问题及其解决方案，同时还有许多实用的技巧和...
ExtJS是一个开源的JavaScript库，主要用于...通过本笔记的学习，可以掌握ExtJS在前端开发中的应用，理解各个组件和管理器的使用方法，以及一些针对特定浏览器的布局技巧，为创建美观、高效的用户界面打下坚实的基础。
四、《Extjs4.0学习笔记.wps》 这份笔记可能是个人学习过程中的记录，可能包含了一些实践案例和代码示例，对特定功能的使用进行了详细解析。通过阅读这些笔记，读者可以了解到实际项目中遇到的问题和解决方法，有助...
学习笔记这部分可能是作者在学习过程中积累的心得体会，涵盖了遇到的问题、解决方案，甚至是最佳实践。对于初学者来说，这是一份非常宝贵的学习资源，因为它可能包含了一些官方文档中没有提到的实际应用场景和技巧。...
通过学习这份笔记，开发者可以深入了解ExtJS的架构，提高开发效率，打造出功能丰富且用户体验优秀的Web应用程序。 总之，《AnyFo - ExtJS 移魂大法》是一份详尽的ExtJS实战指南，无论对于新手还是有经验的开发者，...