Extjs4.0 学习笔记二
一：页面效果
二：页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Layout</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-panel-body p {
margin:5px;
}
.x-column-layout-ct .x-panel {
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom:5px;
}
.settings {
background-image:url(shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(shared/icons/fam/folder_go.png) !important;
}
</style>
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: 'hello world',
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: 'hello world',
border:false,
autoScroll:true,
iconCls:'settings' //A CSS class that specifies a background-image to use as the icon for this item. ...
}]
},{
region:'center',
margins:'35 5 5 0',
layout:'column',
autoScroll:true,
defaults: {
layout: 'anchor',
defaults: {
anchor: '100%'
}
},
items: [{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: 'go go'
}]
},{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 5px',
items:[{
title: 'A Panel',
html: 'go go'
}]
},{
columnWidth: 1/3,
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[{
title: 'A Panel',
html: 'go go'
},{
title: 'Another Panel',
html: 'go go'
}]
}]
}]
});
});
</script>
</head>
<body>
</body>
</html>
三 总结
通过本次例子可以学习总结到以下知识点：
1. Ext.create 说明
create( String name, Mixed args ) : Object 本方法返回的是一个对象
Instantiate a class by either full name, alias or alternate name (通过全名或别名实例化一个类)
If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
Ext.create is alias for Ext.ClassManager.instantiate.
Ext.create 功能与 Ext.ClassManager.instantiate 是一样的
2. 菜单图标的引入方式
首先在CSS代码中引入图片
.settings {
background-image:url(shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(shared/icons/fam/folder_go.png) !important;
}
然后在通过Extjs的iconCls属性来引入上面定义的CSS
iconCls:'settings'
iconCls:'nav'
Extjs官网API描述如下：
iconCls: A CSS class that specifies a background-image to use as the icon for this item. ...
样式如图所示：
3：面板的左右可折叠功能
此功能是通过Extjs的属性 collapsible: true 来实现的。
加上此语句后：面板上就会出现如下样式（红色框中样式即为可折叠功能样式）：
- 大小: 17.1 KB
- 大小: 8.4 KB
- 大小: 972 Bytes
分享到：
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...
Extjs4.0学习笔记大全.pdf，供大家学习
Extjs4.0学习笔记大全
EXTJS 是一个强大的JavaScript 库，专用于...EXTJS 4.0的学习涉及到了组件的创建、布局的管理、数据绑定和事件处理等多个方面，理解并熟练掌握这些知识点，能帮助开发者构建出功能强大、用户体验优秀的Web应用程序。
ExtJS4 学习笔记(一)---window 的创建 Extjs4,创建 Ext 组件有了新的方式，就是 Ext.create(....)，而且可以使用动态加载 JS 的方式 来加快组件的渲染，我们再也不必一次加载已经达到 1MB 的 ext-all.js 了，本文...
Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid，带checkbox的可编辑的Grid等知识点，并附实现代码
四、《Extjs4.0学习笔记.wps》 这份笔记可能是个人学习过程中的记录，可能包含了一些实践案例和代码示例，对特定功能的使用进行了详细解析。通过阅读这些笔记，读者可以了解到实际项目中遇到的问题和解决方法，有助...
Extjs4.0学习资料，不知道大家能不能用到。
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
EXT 4.0 是一款流行的JavaScript库，专门用于构建富...EXT 4.0提供了丰富的API文档，允许开发者深入学习并自定义更多功能，如分页、筛选、编辑等。对于初学者来说，了解和实践这些基本概念是掌握EXT 4.0的第一步。
Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步，我在参照原作者的代码，照着在我的机器上敲了一边，并调试成功 解压至web发布的根目录即可 本代码适用于...
Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发指南.pdf Extjs中文文档.pdf EXT--zgibfwebjiaocheng.doc EXT官方网站+中文教程.doc LearningExtJS.pdf 轻松搞定ExtJS.pdf
Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发指南.pdf Extjs中文文档.pdf EXT--zgibfwebjiaocheng.doc EXT官方网站+中文教程.doc LearningExtJS.pdf 轻松搞定ExtJS.pdf
【标题】"关于ExtJS3.3版本学习笔记"揭示了本文档主要关注的是ExtJS框架的一个特定历史版本，即3.3版。ExtJS是一个广泛使用的JavaScript库，专为构建富互联网应用程序（RIA）而设计。这个版本的学习笔记可能包含有关...
这篇笔记主要介绍了EXTJS的入门步骤，特别关注了EXTJS 4.1.0-beta-1版本的配置和运行。 首先，我们需要下载EXTJS的库文件。在这里，作者选择了EXTJS 4.1.0-beta-1版本，但你可以根据需求选择其他版本。下载完成后，...