? ? ? ? ? ?????????????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>