在IT行业中，ExtJS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序。它提供了一套完整的组件模型，包括各种UI控件，如表格、表单、树形结构和菜单等。在本文中，我们将深入探讨如何在ExtJS中实现一个功能，即当用户在select列表中选择项时添加或删除选项。
标题中的"ExtJs 实现select列表选中项时添加删除"指的是在ExtJS应用中创建一个下拉选择列表（Select List），并且当用户选择某一项时，能够执行添加或删除操作。这通常涉及到事件监听、数据模型的操作以及用户界面的实时更新。
我们来看`role.js`文件，它可能包含了实现这个功能的主要逻辑。在ExtJS中，我们可以使用`Ext.form.field.Select`类来创建一个下拉选择列表。为了监听用户的选中操作，我们需要绑定`select`事件。当`select`事件触发时，我们可以获取到被选中的选项，并根据需求执行添加或删除操作。以下是一个简单的示例：
```javascript
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'selectfield',
fieldLabel: '角色',
store: rolesStore, // 假设rolesStore是包含选项的数据源
displayField: 'name',
valueField: 'id',
listeners: {
select: function(selectField, record, eOpts) {
var selectedRoleId = record.get('id');
// 在这里处理添加或删除操作
}
}
}]
});
```
在描述中提到的"博文链接"指向了可能详细介绍该功能实现的博客文章，但由于链接未提供具体内容，我们只能基于ExtJS的基本知识进行推断。
`main.css`文件通常包含应用的样式规则，用于定制UI的外观。在实现上述功能时，可能需要为添加和删除按钮定义样式，或者为选中项高亮显示。例如，你可以定义一个类来标记当前选中的项：
```css
.select-selected {
background-color: #F0F0F0; /* 自定义高亮颜色 */
}
```
`orgbuttonevent.js`可能是处理组织按钮事件的脚本，比如添加或删除按钮的点击事件。在ExtJS中，可以使用`Ext.Button`创建按钮，并添加`click`事件监听器。下面是一个简单的例子：
```javascript
Ext.create('Ext.Button', {
text: '删除',
listeners: {
click: function(button, e) {
// 在这里处理删除操作
}
}
});
```
`mwtomattr.jsp`看起来像是一个Java服务器端的页面，可能负责处理来自客户端的请求，如添加或删除角色的后端逻辑。在实际应用中，这些操作通常会通过Ajax请求发送到服务器，然后服务器响应并更新数据库。
实现"ExtJs 实现select列表选中项时添加删除"的功能，需要结合前端ExtJS组件的事件监听和后端数据处理。通过监听`select`事件来响应用户的选择，然后调用相应的添加或删除方法，同时保持UI的实时更新。在这个过程中，CSS样式和服务器端的处理也扮演着关键的角色。
Ext.rar （4个子文件） 
orgbuttonevent.js 3KB
