Dorado 9 : DataBlockView(DCUG)

DataBlockView的基本特性和使用方法与BlockView一致，详情请参考：BlockView(DCUG)

与BlockView最大的不同是：BlockView通过items属性定义内部的块，而DataBlockView通过其所设定的DataSet和DataPath属性所计算得到的EntityList作为自身的块。

关于DataSet和DataPath的设定和使用技巧请参考：DataControl(DCUG)#显示一个集合类对象

另外需要注意的是块渲染器的使用，由于在BlockView中块渲染器是针对其items属性存储的数据做定制化处理的，如：

BlockView的onReady事件中初始化items的代码如下：

// @Bind #blockView1.onReady
!function(self, arg) {
     self.set("items",["item1","item2","item3","item4","item5","item6","item7","item8","item9","item10","item11","item12","item13","item14","item15","item16","item17"]);
}

我们就可以自定义块渲染器：

var SimpleBlockRenderer1 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerText = arg.data;
	}
});

这样浏览器中的页面效果就如下：

但是如果采用DataSet绑定后，自定义块渲染器中的代码就要面向dorado.Entity编程，如Entity对象对应的DataType结构如下：

那么块渲染器的代码就需要调整为：

var SimpleBlockRenderer1 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerText = arg.data.get("label");//注意要根据Entity的api获取内部属性
	}
});

支持图片显示的块渲染器：

var SimpleBlockRenderer2 = $extend(dorado.widget.blockview.DefaultBlockRenderer,{
	render: function(dom, arg) {
		dom.innerHTML = "<img src='"+arg.data.get("icon")+"' />";//注意要根据Entity的api获取内部属性
	}
});

使用系统内置的ImageBlockRenderer的时候就可以：

blockView.set("renderer", new dorado.widget.blockview.ImageBlockRenderer({
	captionProperty:"label", 
	imageProperty: "icon"
	}));

Dorado 9 : DataBlockView(DCUG)

Attachments: