Extjs4.0学习笔记 NO1
Extjs4.0 学习笔记 NO 1
一：准备工作
Ext4.0官方包下载下来，解压后有128M，如果直接在项目中引用，会出现编译器假死状态，所以在实际开发过程中就需要试着删除一些不必要的文件，只需要将需要的文件引入即可。
解压后的目录结构为如下所图：
删除后不必要的文件后目录大小为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>