Extjs 常用属性详解与应用示例

"这篇文档主要介绍了Extjs框架中的一些常用属性，包括命名空间、全局变量、元素操作、页面重载、布局模式、组件属性、事件监听等核心概念。" 在Extjs开发中，掌握常见的属性是非常重要的。以下是一些关键知识点的详细说明： 1. **命名空间（Namespace）**： - `Ext.namespace` 用于创建JavaScript命名空间，避免全局变量污染。例如：`Ext.namespace('com.faceye.layout')` 创建了`com.faceye.layout`这个命名空间，可以在这个命名空间下定义类和对象。 2. **全局变量与元素操作**： - `Ext.BLANK_IMAGE_URL` 是一个全局变量，通常用来设置空图标的URL。 - `Ext.get('user')` 用于获取ID为'user'的DOM元素，返回一个Ext.Element对象，可以进行进一步的操作。 - `new Ext.Element(user)` 创建一个新的Ext.Element实例，方便对DOM元素进行增强操作。 3. **页面操作**： - `location.href='www.92java.com';` 用于改变当前页面的URL到指定的链接。 - `window.location.reload(true);` 重新加载当前页面，`true`表示强制从服务器而不是缓存中获取数据。 4. **布局（Layout）**： - `layout` 属性可以设置为不同的布局模式，如 `'fit'` (适合布局)，`'border'` (边框布局)，`'table'` (表格布局)，`'column'` (列布局) 和 `'card'` (卡片布局)。 5. **组件属性**： - `disabled: true` 使组件禁用，不可交互。 - `hidden: true` 隐藏组件。 - `closeAction: 'hide'` 设置关闭窗口时的行为，这里为隐藏而不是销毁。 - `target="_blank"` 在新标签页中打开链接。 - `renderTo: document.body` 指定组件渲染到文档的body元素中。 - `applyTo:'local-states'` 将组件应用到ID为'local-states'的元素上。 6. **动画效果**： - `animate: true` 开启组件的动画效果。 7. **事件监听**： - `listeners` 对象可以添加事件监听器，如 `check` 事件的处理函数 `onCheck`。 8. **表单与字段属性**： - `labelAlign: 'left'` 设置表单标签的位置，这里是左对齐。 - `hideLabel: boolean` 控制是否隐藏表单字段的标签。 - `contentEl: 'cartT'` 将ID为'cartT'的元素内容作为组件的内容。 - `valueField: "retrunValue"` 定义combobox选择项的值字段。 - `displayField: "displayText"` 定义combobox显示的文本字段。 - `emptyText: ''` 为空的文本框设置默认提示文字。 9. **尺寸与样式**： - `anchor: '90%'` 设置组件宽度占父容器的90%。 - `closable: true` 是否允许关闭窗口。 - `modal: true` 设置窗口为模态对话框，阻止用户与背景交互。 - `border: true` 显示组件的边框。 - `bodyBorder: true` 设置组件主体的边框。 - `bodyStyle: 'padding:5px'` 添加内边距样式。 这些属性只是Extjs中的一部分，但它们涵盖了Extjs开发中的基础和常见用法。了解并熟练掌握这些属性，将有助于构建高效、功能丰富的Web应用程序。