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>