Dorado 9 : 多页标签(sample-center)

多页标签，效果如下：

实现这种开发效果我们可以通过TabControl控件实现：

标签的分类

在一个TabControl中田间多个ControlTab或IFrameTab,他们的区别如下图：

ControlTab中可以添加子控件，而IFrameTab与IFrame的用法类似，你可以定义一个path属性，内部嵌套一个其他的页面。

closeable和disabled

不管是ControlTab还是IFrameTab都拥有closeable和disabled属性。

其中disabled用于禁止用户的单击操作，closeable用于提供一个X快捷按钮，便于可以直接关闭这个标签页，如下图：

tabPlacement

通过TabControl的tabPlacement属性，可以设定标签页页头位置调整，如上标签页的页头在顶部，如果我们设置为buttom:

NavButtons

当标签页的页头较多，从而导致TabControl控件无法容纳所有的标签页时，系统会自动出现标签页导航按钮，如下图：

MenuButtons

TabControl提供MenuButtons功能，如下图：

单击红线内的MenuButtons，系统会自动的将当前所有的标签页以菜单的形式展现

切换当前标签

除了可以通过鼠标操作切换当前标签页外，我们也可以通过代码实现当前标签的设定-这个尤其是在页面初始化时，希望动态设定当前标签页位置的时候很有用，或者当我们对数据做校验后，希望用户定位到一个标签页继续补充内容时很有用，实现代码如下：

tabControl.set("currentIndex", index);

通过currentIndex属性实现当前标签页的动态设定。

删除当前标签

var tab = tabControl.get("currentTab");
if (tab) {
	tab.close();
}

删除指定标签

var tab = tabControl.getTab(tabName);
if (tab) {
	tab.close();
}

添加标签页(IFrameTab)

var newTab = tabControl.addTab({
	$type : "IFrame",
	caption : options.caption,
	closeable : options.closeable,
	path : options.path
});
tabControl.set("currentTab", newTab);//设置为当前页

添加标签页(ControlTab)

var newTab = tabControl.addTab({
	$type : "Control",
	caption : "测试标题",
	closeable : true
});

如果还希望在ControlTab内部添加子控件对象，则方法如下：

var newTab = tabControl.addTab({
	$type : "Control",
	caption : "测试标题",
	closeable : true,
	control : {
		$type : "Control",
		style : {
			background : ("#cccccc")
		}
	}
});
tabControl.set("currentTab", newTab);

标签页右键菜单

标签页页头的右键菜单效果如下：

实现方式如下，在TabControl的onTabContextMenu事件中添加代码：

view.get("#menuTab").show({
	event: arg.event
});

其中menuTab为一个Menu对象，如图：