Extjs4.0学习笔记：深入浅出组件创建与使用

在开始详细解释之前，我们首先需要理解ExtJS框架以及在4.0版本中的变化。ExtJS是一个基于JavaScript的开源前端框架，它主要用于构建交互式的网页应用，特别是富客户端应用。由Sencha公司开发和维护，它允许开发人员利用其丰富的组件库和数据管理能力来开发复杂的Web界面。 ### 关键知识点详解： #### 1. ExtJS4中的组件创建方式 **Ext.create()函数** 在ExtJS 4.0中，创建组件的方式由传统的`new`关键字转变为使用`Ext.create()`函数。这种方法不仅语法更为简洁，而且支持动态加载，允许仅加载需要的组件，从而减少初次加载时的代码量，提高应用性能。使用示例如下： ```javascript var myComponent = Ext.create('Ext.panel.Panel', { title: 'My Panel', html: 'Hello World' }); ``` #### 2. 动态加载JS文件 ExtJS 4支持动态加载JS文件，这意味着开发者可以根据需要按需加载特定的组件类文件，而不是在页面加载时就一次性加载整个框架。这一特点极大地优化了应用的加载时间，尤其是对于移动端等对加载性能要求较高的应用场景。 #### 3. 创建EXTJS4中的Window Window在ExtJS中是一个基本的弹出窗口组件。它可以用来显示模态对话框或者非模态对话框。使用`Ext.create()`可以创建一个Window实例： ```javascript var win = Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, layout: 'fit', items: { html: 'World' } }); win.show(); ``` #### 4. HBox和VBox布局 HBox和VBox是ExtJS中的两种布局管理器。HBox布局是指容器内的子元素按照水平方向排列，而VBox布局则是按垂直方向排列。这在需要进行复杂界面布局时提供了极大的方便。 ```javascript var vbox = Ext.create('Ext.container.Container', { layout: 'vbox', items: [ { html: 'First Item' }, { html: 'Second Item' } ] }); var hbox = Ext.create('Ext.container.Container', { layout: 'hbox', items: [ { html: 'First Item' }, { html: 'Second Item' } ] }); ``` #### 5. Grid组件的使用 Grid是ExtJS中最为强大的组件之一，主要用于显示和操作二维数据。Grid组件支持分页、多选、排序等多种功能，并且可以通过插件形式进行扩展。使用Grid组件需要在ExtJS中定义列（columns）以及数据模型（store）。 ```javascript var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' } ] }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: store, columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Email', dataIndex: 'email', flex: 1 }, { header: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody() }); ``` #### 6. Grid分页 为了提高大数据集的管理效率，ExtJS的Grid支持分页功能，这意味着数据可以被分成若干页来加载，而不是一次性加载全部数据。分页功能可以通过配置`Ext.toolbar.Paging`工具栏实现。 #### 7. 多表头Grid 在ExtJS中，可以创建具有多行表头的Grid，这样可以在同一列中展示多个层级的标题。这对于数据分析和报表应用特别有用。 #### 8. 带搜索的Grid（SearchGrid） SearchGrid是ExtJS中一个扩展了Grid功能的组件，它允许在Grid中添加搜索功能。通过简单的配置，就可以在Grid的顶部添加搜索栏，方便用户快速找到数据。 #### 9. Grid多选/全选功能 ExtJS的Grid组件支持多选和全选功能，这使得对数据进行批量操作成为可能。通过配置Grid的selModel可以启用这一功能。 #### 10. ExtJS4 EditGrid和图片验证码的实现 EditGrid是一个可编辑的Grid组件，它允许在Grid中直接对数据进行编辑。而图片验证码则是一种防止自动化攻击的机制，它要求用户输入一个由图像显示的随机字符串。 ### 总结 ExtJS 4.0为Web前端开发者提供了强大的工具集，使得开发复杂的用户界面变得更为简单和直观。通过上述各点的深入解析，我们可以看到ExtJS 4.0在组件创建、布局管理、数据处理等方面均有所创新和提升。掌握这些知识点对于使用ExtJS框架进行高效Web开发至关重要。