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学习笔记大全
自己总结的extjs4学习笔记，自己总结的extjs4学习笔记，自己总结的extjs4学习笔记，
Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid，带checkbox的可编辑的Grid等知识点，并附实现代码
ExtJS4 学习笔记(一)---window 的创建 Extjs4,创建 Ext 组件有了新的方式，就是 Ext.create(....)，而且可以使用动态加载 JS 的方式 来加快组件的渲染，我们再也不必一次加载已经达到 1MB 的 ext-all.js 了，本文...
Extjs4.0学习资料，不知道大家能不能用到。
ext 4.0 学习笔记（1）Array Grid 2011-09-20 13:18 860人阅读 评论(1) 收藏 举报 今天刚开始接触EXT，直接跳过2.2等较旧版本；由于网上的中文资料几乎都是2.2，并且我也是刚开始接触EXT，所以用笔记的方式记录我...
ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ...
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的学习笔记,里面涉及到JavaScript的知识我都去做了整理,可以帮助快速上手extjs,当然也能很好的复习JavaScript,更多笔记后期将会一一奉上,希望能多多技术交流,相互提升!
Extjs4.0学习指南(中文).docx ExtJsBook.chm extjs核心api详解.doc ExtJS实用开发指南.pdf Extjs中文文档.pdf EXT--zgibfwebjiaocheng.doc EXT官方网站+中文教程.doc LearningExtJS.pdf 轻松搞定ExtJS.pdf