Extjs4.0 学习笔记一
一：准备工作
Ext4.0官方包下载下来，解压后有128M(我下载的是ext-4.0.2a-gpl.zip版本)，如果直接在项目中引用，会出现编译文件时就是卡机，相当费劲，于时试着去删除一些不必要的文件。
解压后的目录结构为如下所图：
删除后不必要的文件后目录大小为20M，肯定还可以再删除一些不必要的文件，暂且摸索着前进吧。删除后的目录结构如下:
二：简单开发
这里是创建一个简单的页面框架，左边是一个可折叠式的面板。右边是一个空面板。
Accordion Layout ： 可折叠式的布局
<!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%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function(){
var item1 = Ext.create('Ext.Panel', {
title: 'Accordion Item 1',
html: '<empty panel>',
cls:'empty'
});
var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls:'empty'
});
var item3 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});
var item4 = Ext.create('Ext.Panel', {
title: 'Accordion Item 4',
html: '<empty panel>',
cls:'empty'
});
var item5 = Ext.create('Ext.Panel', {
title: 'Accordion Item 5',
html: '<empty panel>',
cls:'empty'
});
var accordion = Ext.create('Ext.Panel', {
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});
var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/><empty center panel>'
}]
});
});
</script>
</head>
<body>
</body>
</html>
这里需要注意的是，对于Ext4.0引入文件，只需要引入一个css文件和一个js文件。
<link rel="stylesheet" type="text/css" href="ext4/resources/css/
ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
- 大小: 13.5 KB
- 大小: 2.8 KB
分享到：
相关推荐
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学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...
EXT 4.0 是一款流行的JavaScript库，专门用于构建富客户端Web应用程序，特别是用于创建复杂的用户界面。在本文中，我们将关注EXT 4.0中的Array Grid，这是一种基础的表格展示组件，适合用来显示和操作二维数组数据。...
Extjs4开发笔记（一）——准备工作 http://www.mhzg.net/a/20116/20116281100279.html Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步，我在参照原作者的...
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版本，但你可以根据需求选择其他版本。下载完成后，...