Ext js常用方法深度解析

### 知识点详解 #### 一、Ext JS概述 Ext JS 是一个用于构建丰富、交互式的Web应用程序的JavaScript框架。它基于jQuery，提供了跨浏览器的高级UI组件，例如表格、树形控件、表单等。由于其丰富的功能和良好的兼容性，Ext JS 在企业级应用中非常流行。 #### 二、Ext JS 的核心组件 Ext JS 的核心组件可以大致分为以下几类： 1. **视图组件（View Components）**：提供丰富的界面组件，例如Panel、Window、TabPanel、Form和Grid。 2. **数据处理（Data Handling）**：包括数据模型（Model）、数据存储（Store）和数据代理（Proxy）。 3. **布局管理（Layout Management）**：提供了多种布局方式，如Border Layout、Card Layout、Grid Layout等，以适应不同布局需求。 4. **工具类（Utility Classes）**：包含用于数据类型检测、数组操作等的实用工具函数。 5. **事件处理（Event Handling）**：支持事件绑定、事件委托、事件传递等复杂的事件管理机制。 #### 三、Ext JS 的类和对象 在Ext JS中，几乎所有的组件都是以类的形式定义的，它们通过继承和扩展来构建。 1. **Ext.Class**：所有Ext JS组件都是通过Ext.Class创建的。 2. **Ext.extend**：用于扩展已有的类创建新的类。 3. **Ext.create**：用于创建类的实例。 #### 四、Ext JS 常用方法详解 1. **Ext.apply**：用于合并源对象的属性到目标对象中，类似JavaScript中的Object.assign。 示例代码： ```javascript var obj1 = { name: 'Object1', value: 1 }; var obj2 = { name: 'Object2', value: 2 }; Ext.apply(obj1, obj2); console.log(obj1); // { name: 'Object2', value: 2 } ``` 2. **Ext.each**：遍历数组或对象的每个元素，类似于jQuery的$.each方法。 示例代码： ```javascript var items = [1, 2, 3]; Ext.each(items, function(item) { console.log(item); // 输出数组中的每个元素 }); ``` 3. **Ext.clone**：创建对象或数组的浅拷贝。 示例代码： ```javascript var obj = { name: 'Original', value: 1 }; var clonedObj = Ext.clone(obj); console.log(clonedObj); // { name: 'Original', value: 1 } ``` 4. **Ext.merge**：用于合并两个对象的可枚举属性到第一个对象中，与apply相似，但更专注于对象。 示例代码： ```javascript var obj1 = { name: 'Object1', value: 1 }; var obj2 = { value: 2, extra: 'Extra' }; Ext.merge(obj1, obj2); console.log(obj1); // { name: 'Object1', value: 2, extra: 'Extra' } ``` 5. **Ext.bind**：绑定函数的上下文（this）和参数。 示例代码： ```javascript var person = { name: 'Person', sayHi: function() { console.log('Hi, I am ' + this.name); } }; var sayHi = Ext.bind(person.sayHi, person); sayHi(); // Hi, I am Person ``` 6. **Ext.onReady**：类似于jQuery的$(document).ready，确保DOM完全加载后再运行代码。 示例代码： ```javascript Ext.onReady(function() { // DOM ready code here... }); ``` #### 五、数据模型与数据存储 在Ext JS中，数据模型是通过`Ext.data.Model`创建，存储是通过`Ext.data.Store`来管理。 1. **Ext.data.Model**：定义数据模型，即数据的结构和验证规则。 2. **Ext.data.Store**：处理模型数据的集合，支持排序、过滤、分页等。 示例代码： ```javascript Ext.define('MyModel', { extend: 'Ext.data.Model', fields: ['id', 'name'], validations: [{ type: 'presence', field: 'name' }] }); var store = Ext.create('Ext.data.Store', { model: 'MyModel', data: [ { id: 1, name: 'Name1' }, { id: 2, name: 'Name2' } ] }); ``` #### 六、布局管理 布局管理器用于控制组件在容器中的排列方式。 1. **Ext.layout.container.Auto**：自动布局，允许子组件根据其内容自动调整大小。 2. **Ext.layout.container.Fit**：将子组件的尺寸调整到适合容器的大小。 3. **Ext.layout.container.HBox**：水平布局，水平排列子组件。 4. **Ext.layout.container.VBox**：垂直布局，垂直排列子组件。 5. **Ext.layout.container.Card**：卡片布局，一次只显示一个子组件。 #### 七、事件处理 事件处理在Ext JS中与DOM事件处理有所不同，主要体现在事件代理和事件对象的使用上。 1. **监听事件**：使用`listeners`配置属性来添加事件监听器。 2. **触发事件**：使用`fireEvent`方法来触发自定义事件。 示例代码： ```javascript var panel = Ext.create('Ext.panel.Panel', { title: 'Panel', height: 200, width: 400, renderTo: Ext.getBody(), listeners: { click: function() { console.log('Panel was clicked!'); } } }); panel.fireEvent('click'); // 触发点击事件 ``` #### 八、Ext JS 的异步通信 在处理异步请求时，Ext JS提供了`Ext.Ajax`来发送和处理HTTP请求。 1. **Ext.Ajax.request**：发起一个异步请求。 2. **success** 和 **failure**：配置请求成功和失败的回调函数。 示例代码： ```javascript Ext.Ajax.request({ url: 'data.json', success: function(response) { console.log('Success:', response.responseText); }, failure: function(response) { console.log('Failure:', response.responseText); } }); ``` #### 九、Ext JS 的扩展和插件 Ext JS提供了丰富的插件和组件扩展，方便开发者进行二次开发和功能扩展。 1. **扩展类**：通过`Ext.extend`创建。 2. **插件应用**：通过`Ext.createPlugin`或者直接在组件中配置`plugins`属性应用。 示例代码： ```javascript // 假设有一个插件 Ext.plugin.SomePlugin var panel = Ext.create('Ext.panel.Panel', { title: 'Panel with Plugin', height: 200, width: 400, renderTo: Ext.getBody(), plugins: { ptype: 'someplugin', someOption: true } }); ``` 以上是Ext JS中一些经典常用方法的详细解析。通过这些方法的使用，可以大大增强Web应用的交互性和功能性。开发者在使用Ext JS时应深入理解每个方法的使用场景和适用范围，以便在项目开发中更好地应用。