### Extjs4.0中文学习手册与入门详解
#### 一、Extjs4.0简介与获取
**Extjs4.0**是一款基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和强大的数据处理功能,使得开发者能够快速构建高性能、交互性强的Web应用。对于初学者来说,熟悉Extjs4.0的基础知识是非常重要的。
- **获取Extjs4.0**:
  - 官方网站:可以从[http://extjs.org.cn/](http://extjs.org.cn/)获得需要的Extjs发布包及更多支持。
  - 下载最新版本的Extjs4.0压缩包,并解压。
- **搭建学习环境**:
  - 假设您的开发环境中已安装MyEclipse和Tomcat。
  - 在MyEclipse中新建一个Web项目,例如命名为`Extjs4`。
  - 将Extjs4.0.7压缩包解压后的所有文件复制到项目根目录下的`WebContent`文件夹中。
  - `Examples`目录包含了Ext官方提供的示例程序,其中可能包含PHP代码,如果遇到错误信息可暂时忽略。
  - 部署并启动Tomcat服务器。
  - 测试环境是否可用:打开浏览器访问`http://localhost:8080/Ext4/index.html`。
  - 查看API文档:`http://localhost:8080/Ext4/docs/index.html`
  - 查看示例页面:`http://localhost:8080/Ext4/examples/index.html`
#### 二、编写第一个Extjs程序
- **创建Hello World示例**:
  - 在`WebContent`目录下新建`helloworld.js`文件,并输入以下内容:
    ```javascript
    Ext.onReady(function(){
        Ext.create('Ext.panel.Panel', {
            title: 'Hello Ext',
            width: 350,
            bodyPadding: 5,
            items: [{
                xtype: 'label',
                text: 'Hello! Welcome to ExtJS.'
            }]
        }).render(document.body);
    });
    ```
  - 创建`helloworld.html`文件,并输入以下内容:
    ```html
    
    
    
        
        
Hello ExtJS
        
        
        
        
    
    
    
    ```
  - 浏览器访问`http://localhost:8080/Ext4/helloworld.html`,如果一切正常,您将看到一个带有标题“Hello Ext”的面板,内容为“Hello! Welcome to ExtJS.”。
- **理解Ext.onReady和Ext.application**:
  - `Ext.onReady`:该方法在当前DOM加载完成后自动调用,确保页面内的所有元素都能被脚本引用。示例代码:
    ```javascript
    Ext.onReady(function(){
        alert('Hello World!');
    });
    ```
  - `Ext.application`:用于定义一个Ext应用的基类,通常用于构建完整的Ext应用。
#### 三、DOM操作与事件响应
- **获取DOM元素**:
  - 使用`Ext.get`方法根据ID获取页面上的元素:
    ```javascript
    var myDiv = Ext.get('myDiv');
    ```
  - `Ext.get`返回的是一个`Element`对象,可以直接操作底层DOM节点。
- **选择器**:
  - 使用`Ext.select`方法获取具有特定CSS选择器的所有元素:
    ```javascript
    var paragraphs = Ext.select('p');
    ```
  - `Ext.select`返回的是`Ext.CompositeElement`对象,可通过其中的`each()`方法遍历所选元素。
- **事件处理**:
  - 给按钮添加单击事件响应:
    ```javascript
    var button = Ext.get('myButton');
    button.on('click', function(){
        alert('Button clicked!');
    });
    ```
#### 四、Extjs4布局详解
- **Fit布局**:
  - Fit布局中,子元素会自动填充整个父容器空间。
  - 如果在Fit布局中放置了多个组件,仅显示第一个子元素。
  - 示例代码:
    ```javascript
    Ext.create('Ext.window.Window', {
        title: 'Fit Layout Example',
        layout: 'fit',
        width: 400,
        height: 300,
        items: [
            {xtype: 'grid', store: myStore}
        ]
    }).show();
    ```
- **Border布局**:
  - Border布局允许在一个容器内将子组件分成五个区域:北(North)、南(South)、东(East)、西(West)和中心(Center)。
  - 每个区域可以包含一个或多个子组件,子组件可以根据布局规则调整其大小和位置。
  - 示例代码:
    ```javascript
    Ext.create('Ext.panel.Panel', {
        title: 'Border Layout Example',
        layout: 'border',
        width: 600,
        height: 400,
        items: [
            {xtype: 'grid', region: 'center', store: myStore},
            {xtype: 'panel', region: 'west', width: 200, collapsible: true, title: 'Navigation'},
            {xtype: 'toolbar', region: 'north', title: 'Toolbar'}
        ]
    }).show();
    ```
通过以上步骤,您已经完成了Extjs4.0的初步学习,并能够掌握如何搭建开发环境、编写基础示例程序、操作DOM元素、处理事件以及理解不同类型的布局。希望这些基础知识能帮助您更好地探索和学习Extjs4.0。
                                    
                                    
                                        
                                            1