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>