ExtJS设置ComboBox级联菜单默认值教程

"这篇资源主要讨论了如何在ExtJS中为级联菜单（ComboBox）设置默认值，特别强调了与普通控件赋值的区别，并给出了一个适用于ExtJS 3.0.0版本的示例代码。" 在ExtJS中，为普通的输入控件如文本框赋值确实非常简单，通常只需要一行代码就能完成。然而，对于更复杂的组件，如级联下拉菜单（ComboBox），尤其是涉及到远程数据加载和联动效果时，设置默认值就变得相对复杂。ComboBox常常用于实现多级选择，例如省份和城市的选择，当选择一个省份后，城市列表会根据所选省份动态更新。 在提供的代码段中，我们可以看到以下关键点： 1. `ExtStore` 是一个自定义函数，用于创建一个新的Ext.data.Store对象，它封装了对HTTP代理的配置，以便从指定的URL获取数据。这里有两个实例，分别用于省份和城市的加载。 ```javascript function ExtStore(url) { return new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: url }), reader: new Ext.data.JsonReader({ totalProperty: 'count', root: 'result' }, [ { name: 'Id' }, { name: 'Name' } ]) }); } ``` 2. `var combo1` 和 `var combo2` 分别初始化了两个ComboBox，其中`combo1`用于展示省份，`combo2`用于展示城市。`combo2`的初始化包含了父级菜单的ID，这在级联菜单中很重要。 3. 当`combo1`的选择发生变化时，通过监听`select`事件来触发联动行为。在事件处理器中，获取选中的省份ID，并检查是否需要更新`combo2`的值。如果需要，可以通过省份ID去获取对应的城市数据，并设置`combo2`的值。 ```javascript listeners: { 'select': function (combo, record) { var id = record.get('Id'); // ... } } ``` 4. 在实际应用中，`// ...` 部分可能包含调用服务器接口获取城市数据的逻辑，并使用`combo2`的`load`方法加载新数据。同时，为了设置`combo2`的默认值，你需要先确保城市数据已经加载完毕，然后设置`value`属性，如`combo2.setValue(selectedCityId)`。 5. `ComboBox`的其他配置项，如`mode: 'remote'`表示数据是远程加载的，`editable: false`禁止直接编辑输入框，`triggerAction: 'all'`表示触发按钮会显示所有匹配项，`displayField`和`valueField`分别定义了显示字段和存储的值字段。 设置ExtJS的级联菜单默认值涉及多个步骤，包括创建数据源、监听事件、动态加载数据以及在适当的时候设置值。这个过程比对普通控件赋值要复杂得多，需要理解ComboBox的工作原理以及如何与服务器进行数据交互。