在本文中，我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库，它提供了丰富的用户界面组件，包括ComboBox，用于创建下拉选择框。在这个例程中，我们将看到如何利用Store来存储数据，并通过JavaScript的事件处理机制实现联动效果。
理解ComboBox的基础是关键。ComboBox是Ext中的一种控件，它结合了文本输入框和下拉列表。用户可以手动输入文本，也可以从下拉列表中选择一个选项。在本例中，ComboBox将用于省份的选择，当用户选择一个省份时，城市列表会根据所选省份动态更新。
1. **创建Store**
联动选择框的核心在于数据存储和检索。我们需要两个Store，一个用于省份，一个用于城市。省份Store包含所有省份的ID和名称，城市Store则根据省份ID来加载对应的城市。数据可以来自JSON文件或服务器端API，通常以键值对形式存储。
2. **配置ComboBox**
对于省份ComboBox，我们需要设置它的`store`属性为省份Store，`displayField`为省份名称，`valueField`为省份ID。同时，我们需要监听`select`事件，当用户选择一个省份时触发。
3. **事件处理**
当省份ComboBox的`select`事件触发时，我们可以获取选中的省份ID，然后清空城市ComboBox的Store，并通过省份ID从服务器获取对应的城市数据。更新城市Store后，城市ComboBox会自动显示新的城市列表。
4. **城市ComboBox的配置**
城市ComboBox的配置与省份ComboBox类似，但其`store`需要初始化为空，等待省份选择后动态填充。`queryMode`一般设置为`local`，因为城市列表在省份选择后才加载。`displayField`为城市名称，`valueField`为城市ID。
5. **代码实现**
以下是一个简化的代码示例：
```javascript
var provincesStore = new Ext.data.Store({
// 省份数据配置
});
var citiesStore = new Ext.data.Store({
data: [], // 初始为空
// 城市数据配置
});
var provinceComboBox = new Ext.form.ComboBox({
store: provincesStore,
displayField: 'provinceName',
valueField: 'provinceId',
listeners: {
select: function(combo, record, index) {
var selectedProvinceId = record.get('provinceId');
// 根据selectedProvinceId从服务器获取城市数据并更新citiesStore
}
}
});
var cityComboBox = new Ext.form.ComboBox({
store: citiesStore,
displayField: 'cityName',
valueField: 'cityId',
queryMode: 'local'
});
```
6. **数据加载**
获取城市数据通常通过Ajax请求完成，使用`Ext.Ajax.request`方法向服务器发送GET或POST请求，然后在回调函数中更新citiesStore的数据。
7. **布局和渲染**
将这两个ComboBox添加到一个Panel或Window中，并在页面上渲染。这可以通过Ext的布局系统轻松完成，例如使用`border`或`hbox`布局。
实现省份和城市联动选择框的关键在于正确配置和使用ComboBox、Store以及事件监听。通过这个例程，我们可以为用户提供一个交互性强、易于使用的地理选择界面。记住，实际项目中还需要考虑错误处理、用户体验优化以及数据缓存等细节问题。
province.rar （3个子文件） 
province 
test.asp 240B
form.html 4KB
- 1
- 2
- 3
前往页