Ext RadioGroup实例

Ext RadioGroup是Ext JS库中的一个组件，用于创建一组单选按钮。在Web应用程序中，RadioGroup常用于让用户从多个互斥选项中选择一个。在本文中，我们将深入探讨Ext RadioGroup的使用方法，包括其配置选项、事件处理以及如何提取选定的值和文本。 我们来看RadioGroup的基本创建过程。在Ext JS中，RadioGroup可以通过传递配置对象来初始化： ```javascript var radioGroup = new Ext.form.RadioGroup({ fieldLabel: '选择一项', columns: 2, // 设置每行显示的列数 items: [ {boxLabel: '选项1', name: 'choice', inputValue: '1'}, {boxLabel: '选项2', name: 'choice', inputValue: '2'}, {boxLabel: '选项3', name: 'choice', inputValue: '3'} ] }); ``` 在这个例子中，`fieldLabel`定义了RadioGroup的标签，`columns`指定了每行显示的单选按钮数量，而`items`数组则包含了每个单选按钮的配置，包括它的文字（`boxLabel`）和输入值（`inputValue`）。 接着，我们可以探讨如何从RadioGroup中获取用户的选择。有两种主要方式：一是通过`getValue()`方法获取选定的值，二是通过`getSelected()`方法获取选定的单选按钮对象。例如： ```javascript // 获取选定的值 var selectedValue = radioGroup.getValue(); console.log(selectedValue); // 获取选定的单选按钮对象 var selectedRadio = radioGroup.getSelected()[0]; console.log(selectedRadio); ``` 关于RadioGroup的事件处理，我们可以监听`change`事件来捕获用户选择改变的情况。下面展示了如何添加事件监听器： ```javascript radioGroup.on('change', function(group, newValue, oldValue) { console.log('选择已更改，新的值为:', newValue); }); ``` 在这个事件处理函数中，`group`参数是触发事件的RadioGroup实例，`newValue`是新选择的值，`oldValue`则是之前选择的值。 此外，`RadioGroup`还支持多种配置选项来定制其外观和行为，例如`vertical`（设置单选按钮是否垂直排列）、`hideLabel`（隐藏字段标签）等。你可以在`RadioGroup.htm`文档中查看更详细的示例代码和演示效果。 我们提到的`Scripts`和`Extjs311`可能分别代表脚本文件夹和Ext JS 3.1.1版本的库文件。确保引入这些文件才能在页面上正确运行上述代码。 总结来说，Ext RadioGroup是Ext JS中的一个强大组件，它提供了一种有效的方式让用户在多个选项中做出单一选择。通过配置、事件处理和方法调用，开发者可以灵活地控制和响应用户的选择，从而实现各种功能丰富的界面交互。