`
hnhnhnhnhn
  • 浏览: 77152 次
社区版块
存档分类
最新评论

ExtJS4学习笔记五－－面板使用

ExtJS4 
阅读更多
标准面板： 
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页
		}
分享到：
| ExtJS4学习笔记四－－图片上传
评论
1 楼 SHUIMOMO 2011-12-15  
请问，我在form panel中连续放了几个button，这几个按钮之间几乎一点间距空隙也没有。
用表格布局也不行，有什么办法解决吗？
您遇到过么……
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extJs 2.1学习笔记

    【ExtJs 2.1学习笔记】主要涵盖了ExtJs框架的核心概念、组件使用以及数据通信等方面的知识点。以下是对这些内容的详细解析： 1. **ExtJs 结构树**：这部分内容介绍了ExtJs的组件层次结构，包括如何组织和嵌套组件，...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础：弹出框 在ExtJS中，`Ext.MessageBox`提供了创建各种模态对话框的功能，包括提示、确认、输入等。以下是几个基本示例： 1. **简单警告对话框**： ```javascript Ext....

    extJs+2.1学习笔记.pdf

    本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中，应用程序通常基于组件树构建，每个组件都有自己的属性、方法和事件。理解这种结构对于布局...

    ExtJs学习笔记.pdf

    ### ExtJs 学习笔记知识点总结 #### 一、初识 ExtJs ##### 1.1 入门 - **背景介绍**： - **ExtJs**：一款强大的JavaScript库，用于构建现代化的Web应用程序。它提供了一系列丰富的UI组件、布局管理器以及数据...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    本资源包包含了与ExtJS 3.4相关的学习资料，包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`，旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...

    JavaScript.-Extjs基础学习笔记

    根据给定的文件信息，我们可以深入探讨两个关键的Extjs组件——Tab Panel（标签页控件）和Grid（表格控件）。这两个控件是Extjs框架中非常实用且功能丰富的部分，广泛应用于Web应用程序的界面设计与交互逻辑构建。 ...

    ExtJs学习笔记，共30讲

    这个学习笔记涵盖了从基础到高级的多个主题，帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明： 1. **ExtJs 结构树**：这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树，包括...

    Extjs4 MVC开发笔记源码

    本笔记源码主要展示了如何在ExtJS 4中运用MVC模式进行开发。 一、MVC模式 MVC模式将应用分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。模型处理数据和业务逻辑，视图负责显示用户界面，...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    extjs4笔记PDF版本，带目录

    #### 二、获取ExtJS4并搭建学习环境 ##### 获取ExtJS4 首先，你需要从官方资源或可信赖的第三方资源下载ExtJS4。推荐访问`http://extjs.org.cn/`获取最新版本的发布包，这包括了必要的文件和API文档，对初学者非常...

    ExtJs + api + 笔记 + 完整包

    本资源包含ExtJs的API文档、笔记以及示例，帮助开发者深入理解和使用ExtJs。 首先，API文档是ExtJs开发的基础，其中包括ExtJs3.2和3.1-3.3的中文版本。这些CHM文件提供了详细的类、方法和事件的参考，有助于开发者...

    extjs学习网页学习资料

    开发者在学习过程中不仅要理解文档，还应该结合实际的开发笔记和个人学习笔记，对所学知识进行实际的编码操作和问题解决实践。这些笔记通常包含了他人在开发过程中遇到的问题及其解决方案，同时还有许多实用的技巧和...

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库，主要用于...通过本笔记的学习，可以掌握ExtJS在前端开发中的应用，理解各个组件和管理器的使用方法，以及一些针对特定浏览器的布局技巧，为创建美观、高效的用户界面打下坚实的基础。

    ExtJS4.0 MVC 学习资料集合

    四、《Extjs4.0学习笔记.wps》 这份笔记可能是个人学习过程中的记录，可能包含了一些实践案例和代码示例，对特定功能的使用进行了详细解析。通过阅读这些笔记，读者可以了解到实际项目中遇到的问题和解决方法，有助...

    用Extjs+asp.net写的一个例子 适合刚刚学习Extjs的朋友

    学习笔记这部分可能是作者在学习过程中积累的心得体会，涵盖了遇到的问题、解决方案，甚至是最佳实践。对于初学者来说，这是一份非常宝贵的学习资源，因为它可能包含了一些官方文档中没有提到的实际应用场景和技巧。...

    AnyFo - ExtJS 移魂大法.doc

    通过学习这份笔记，开发者可以深入了解ExtJS的架构，提高开发效率，打造出功能丰富且用户体验优秀的Web应用程序。 总之，《AnyFo - ExtJS 移魂大法》是一份详尽的ExtJS实战指南，无论对于新手还是有经验的开发者，...

Magicbox
Global site tag (gtag.js) - Google Analytics