ExtJs学习过程记录(一)

转载自:http://jingjing0907.iteye.com/blog/2147748

刚刚开始学习ExtJs,网上查找资料,边学习边记录,防止边学边忘- -!

 
发布包里的内容并非都是必需的,比如文档 示例 源代码.

必需内容至少应包括:如下
ext-all.js：Ext核心库
ext-base.js ：表示框架基础库
ext-all.js  和 adapter/ext/ext-base.js 包含了ext的所有功能，所有的JavaScript脚本都在这里
build/locale/ext-lang-zh_CN.js  是简体中文国际化资源文件
整个resources目录 ：是CSS样式表和图片
 

只要自己的项目中包含上述内容，就可以使用Ext了，使用时，在页面导入下面的代码即可：
注意：导入时，请注意JavaScript脚本的顺序 

Java代码  

1. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
2. <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
3. <script type="text/javascript" src="../../ext-all.js"></script>  
4. <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>  

1）、Ext.onReady方法

这个方法会在DOM加载全部完毕后，保证页面内的所有元素能被Script引用（reference）之后调用。

Java代码  

1. Ext.onReady(function() {  
2.         alert("Hello World !");  
3. });  

2）、Ext.define()函数负责创建一个新的类，支持两个参数，第一个参数是字符串类型的类名，第二个参数是object类型，其中可以填写

这个类型的字段和函数。

Java代码  

1. Ext.define('demo.demo',{  
2.         name:'Extjs',  
3.         hello:function(){  
4.          return 'Hello '+this.name;  
5.         }    
6.         });  

3）、对象继承：可以直接通过Ext.define()的extend属性来实现，
     定义的新类demo.DemoWindow 继承Ext.Window 所有功能，也扩展新功能
     //相关代码如下：

Java代码  

1. Ext.define('demo.DemoWindow',{  
2. extend:'Ext.Window',           //继承Ext.Window  
3. title:'demo header'，         //设置一个默认的标题  
4. initComponent:function(){   //初始化类  
5.  Ext.apply(this,{                 //apply() 函数将一批属性批量复制给当前对象this  
6.  items:[{  
7.    html:'panel1'  
8.  },{  
9.    html:'panel2'  
10.  }]  
11.  });  
12.  this.callParent();           //此函数实现对父类函数的快捷调用  
13.  }  
14. );  

4)、多重继承，Ext.define()遵守的依然是单根继承，在不破坏单根继承的前提下，提出了使用混入(mixin)的方式对多重继承的支持

Java代码  

1. Ext.define('demo.DemoPanel',{  
2.   extend:'Ext.Window',  
3.   mixins:['demo.Demo']  
4. })；  
5.    

二）、统一的组件模型

我们日常开发中时接触的最多的还是各种组件与布局，通过组件、布局的各种组合最终才形成了功能强劲的应用，所以有必要首先对Ext的

组件模型有所了解。

1）Ext.Component
Ext中所有可视化组件都继承自Ext.Component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期.
组件最常见的几项功能包括:
initComponent()  初始化
render() 渲染
show()   显示
hide()   隐藏

作为基类，Ext.Component本身并没有包含任何格式，我们需要在使用时为它指定渲染的html内容，通过html参数传入。

实例代码如下：

Java代码  

1. var box=new Ext.Component({  
2.      el:'test001',  
3.      style:'background-color:red;position:absolute;color:black;',  
4.      pageX:100,  
5.      pageY:50,  
6.      width:200,  
7.      height:150  
8.      });  
9.        
10.      box.render();  

2）Ext.Panel
它是Ext中经常用到的一个组件，它直接继承Ext.Container。不同的是，Ext.Panel无需继承就可以直接使用。
设置属性有:
title:定义它显示的标题
tbar和bbar设置上下位置的工具条
collapseFirst，col设置lapsed，collapsedCls，collapsible 设置于面板折叠相关的配置。
floating和shadow 浮动阴影效果，以及使用html直接设置面板内容
pageX和pageY：设置距离边缘的距离

width和height 设置panel的长和宽

实例代码如下:

Java代码  

1. var panel=new Ext.Panel({  
2.      el:'test002',     
3.      title:'测试标题',  
4.      floating:true,  
5.      shadow:true,  
6.      draggable:true,  
7.      html:'测试内容wwwww',  
8.      pageX:100,  
9.      pageY:100,  
10.      width:200,  
11.      height:200  
12.          
13.      });  
14.        
15.      panel.render();  

3）Ext.Container
   Ext.Container继承自Ext.Component，它提供了连个重要的参数：layout和items
   layout：参数指定当前组件使用何种布局
   items：参数中包含的是当前组件中的所有子组件。

 还有一个重要的概念就是xtype：
Ext中的一大特色就是使用xtype来实现简化配置和延迟布局中组件的初始化。对于没有设置xtype的组件，Ext会统一当做Ext.Panel使用，

所以在使用Ext.Panel作为子组件时可以直接省略xtype参数。

实例代码如下：

Java代码  

1. new Ext.Viewport({  
2.       layout:'border',  
3.       items:[  
4.       {xtype:'panel',region:'north'},  
5.       {region:'south'},  
6.       {region:'west'},  
7.       {region:'east'},  
8.       {region:'center'}  
9.       ]  
10.      }); 
11.