效果预览

定义方法

XML定义

<RadioGroup id="radioGroup">
	<Property name="value">3</Property>
	<RadioButton>
	<Property name="value">1</Property>
	<Property name="text">南非</Property>
	</RadioButton>
	<RadioButton>
	<Property name="value">2</Property>
	<Property name="text">阿根廷</Property>
	</RadioButton>
	<RadioButton>
	<Property name="value">3</Property>
	<Property name="text">巴西</Property>
	</RadioButton>
	<RadioButton>
	<Property name="value">4</Property>
	<Property name="text">墨西哥</Property>
	</RadioButton>
	<RadioButton>
	<Property name="value">5</Property>
	<Property name="text">哥伦比亚</Property>
	</RadioButton>
</RadioGroup>

JSON定义

var radioGroup = {
	"$type":"RadioGroup",
	"radioButtons":[
		{
			"text":"南非",
			"value":"1"
		},
		{
			"text":"阿根廷",
			"value":"2"
		},
		{
			"text":"巴西",
			"value":"3"
		},
		{
			"text":"墨西哥",
			"value":"4"
		},
		{
			"text":"哥伦比亚",
			"value":"5"
		}
	],
	"id":"radioGroup",
	"value":"3"
}

重要属性说明

layout

layout提供了两种选择，分别表示是横向布局RadioButton还是纵向布局RadioButton,效果图如下:

flow

vertical

value

RadioGroup会根据value属性激活对应的RadioButton的选中状态

技巧

技巧一：JS动态声明RadioButton

radioGroup.set("radioButtons",[
        {
            "text":"南非",
            "value":"1"
        },
        {
            "text":"阿根廷",
            "value":"2"
        },
        {
            "text":"巴西",
            "value":"3"
        },
        {
            "text":"墨西哥",
            "value":"4"
        },
        {
            "text":"哥伦比亚",
            "value":"5"
        }
]);

技巧二：利用PropertyDef的mapping机制定义RadioButton

大多数的情况下我们都会定义DataType，并利用AutoForm和DataGrid做编程，在这种情形下，对于内部的AutoFormElement和DataColumn元素，如果我们希望以RadioGroup形式展现除了上述明确定义RadioGroup的方式之外，还有另一种更好的方法：

我们知道PropertyDef支持mapping的设定，这儿介绍如何利用这个特性生成RadioGroup中的buttons，首先定义Mapping:

<PropertyDef name="propertyDef1">
<Property name="mapping">
  <Property name="mapValues">
    <Collection>
      <Entity>
	<Property name="label">南非</Property>
	<Property name="value">1</Property>
      </Entity>
      <Entity>
	<Property name="label">阿根廷</Property>
	<Property name="value">2</Property>
      </Entity>
      <Entity>
	<Property name="label">巴西</Property>
	<Property name="value">3</Property>
      </Entity>
      <Entity>
	<Property name="label">墨西哥</Property>
	<Property name="value">4</Property>
      </Entity>
      <Entity>
	<Property name="label">哥伦比亚</Property>
	<Property name="value">5</Property>
      </Entity>
    </Collection>
  </Property>
  <Property name="keyProperty">value</Property>
  <Property name="valueProperty">label</Property>
</Property>

分两种使用场景：

场景一：AutoFormElement

在AutoForm中与propertyDef1绑定的AutoFormElement,如果希望将上述的mapping设定作为自身的RadioButton元素，则只要设定其editorType属性为RadioGroup即可，如图：

场景二：DataColumn

在DataGrid中与propertyDef1绑定的DataColumn,如果希望将上述的mapping设定作为自身的RadioButton元素，则需要设定其renderer属性为dorado.widget.grid.RadioGroupCellRenderer，如图：

另外在mapping的技术中，我们知道mapping中的内容是可以利用DataProvider技术动态生成的，这样我们还能利用mapping技术的这种特征动态的从数据库中的一张物理表中动态生成RadioButton元素.

有关mapping的dataProvider技术参考：快速入门的mapping技术讲解(http://wiki.bsdn.org/display/d7training/01.+mapping)

技巧三：DataColumn中不同行有不同的RadioButton，效果如图：

上图这种效果，我们就无法通过技巧二中的mapping技术解决，这个时候可以考虑利用DataGrid中的自定义DataColumn的renderer技术实现。技巧二的场景二使用了Dorado默认提供的dorado.widget.grid.RadioGroupCellRenderer控件，现在我们尝试自己创建一个renderer控件：

var CellRenderer = $extend(dorado.widget.grid.SubControlCellRenderer, {
	createSubControl : function(arg) {
		var entity = arg.data;
		var editor = getEditor(entity);
		if (editor) {
			editor.set("width", "100%");
		}
		return editor;
	},
	refreshSubControl : function(editor, arg) {
		if (editor)
			editor.set("value", arg.data.get("value"));
	}
});

其中getEditor方法是一个自定义的方法，它将根据entity中的数据动态创建不同的RadioButton,如:

function getEditor(entity) {
	var editor = new dorado.widget.RadioGroup();
	var param = entity.get("radioButtons");
	editor.set("layout", "flow");
	if (param) {
		var radioButtons = [];
		parseParam(param).each(function(pair) {
			radioButtons.push({
				value : pair.key,
				text : pair.value
			});
		});
		editor.set("radioButtons", radioButtons);
	}
	
	return editor;
}
function parseParam(param) {
	if (!param)
		return null;

	var pairs = [];
	param.split(';').each(function(pair) {
		var i = pair.indexOf('='), key, value;
		if (i >= 0 && i < (pair.length - 1)) {
			pairs.push({
				key : pair.substring(0, i),
				value : pair.substring(i + 1)
			});
		} else {
			pairs.push({
				value : pair
			});
		}
	});
	return pairs;
}

这样最后我们只要设置DataColumn的render属性为这个新建的CellRenderer对象就可以，如：

dataColumn.set("renderer", new CellRenderer());

Dorado 9 : RadioGroup(DCUG)