ExtJs4 实例教程：创建工具条与交互功能

"这篇资源主要介绍了ExtJS4中的toolbar工具条的使用方法，通过一个具体的代码例子展示了如何创建和配置toolbar，包括添加文本、文本字段、按钮等组件，并且涉及了数据加载和用户输入处理的基本操作。" 在ExtJS4中，`toolbar`是一个常用的组件，用于在界面顶部或底部显示一排操作按钮、文本输入框等元素，提供用户交互的界面。创建toolbar主要通过`Ext.toolbar.Toolbar`类实现。以下是对这个例子的详细解析： 1. 创建toolbar对象 `Ext.create('Ext.toolbar.Toolbar',{ ... })` 是创建toolbar对象的方式，你可以在这里定义toolbar的属性和方法。 2. 配置项：items toolbar的`items`属性是一个数组，用于放置各种组件，如按钮、文本字段等。例如： - `"ʋ"` 和 `"ϵ"` 是字符串类型的项，它们会在toolbar上显示为文本。 - `{xtype:'textfield', id:'nameInput', name:'nameInput', text:'ʋ'}` 创建了一个文本字段，`xtype`指定了组件类型，`id`和`name`是标识符，`text`是初始显示的文本。 - 同样的，其他文本字段如`linkmanInput`和`macInput`也是这样配置的。 3. 分隔符 `"|"` 是用来在toolbar上添加一个分隔线，让各个组件之间有所区分。 4. 创建按钮 `Ext.create('Ext.button.Button',{ text:"ѯ", handler:function(){ ... }})` 创建了一个按钮，`text`属性设置按钮的文本，`handler`属性定义了点击按钮时执行的函数。 5. 按钮事件处理 在按钮的`handler`函数中，通过`Ext.getCmp`方法获取了文本字段的值，如`nameInput`、`macInput`和`linkmanInput`，并进行了相关操作。这里是一个简单的示例，实际应用中可能会根据需求进行更复杂的数据处理和交互。 6. 数据加载 `store.load({ params: { start:0, limit:10, nameI ... }})` 这段代码展示了如何加载数据到store中，`params`对象包含了请求数据时所需的参数，如起始位置（start）、限制数量（limit）以及可能的过滤条件（nameI）。 7. 其他组件 注释掉的部分展示了如何添加下拉组合框（combobox），这通常用于提供一个可选择的列表，包含`emptyText`（默认提示文本）、`store`（数据源）、`displayField`（显示字段）、`valueField`（值字段）等属性。 总结来说，这个例子涵盖了ExtJS4中toolbar的基本构造和使用，包括文本、输入框、按钮的创建，以及数据交互和事件处理，对于理解ExtJS4的界面构建具有很好的参考价值。