【仅供内部供应商使用,不提供对外解答和培训】
【仅供内部供应商使用,不提供对外解答和培训】
在新的fineui 后台框架中,是使用 type : dec.provider.tab_pane 来展示模板内容和显示网页,但是做自定义主题开发的时候不能直接使用它,需要给封装一个父类。
本文将讲述一个主题的例子效果如下图
其中红框部分就是
type : dec.provider.tab_pane
骨架部分代码
上面代码中使用了一个zxl.tabs 他是对于dec.provider.tab_pane的封装,直接使用dec.provider.tab_pane会导致调用 下面代码 时无法打开模板
BI.Services.getService("dec.service.frame.tab_pane").addItem(item)
看下封装的 zxl.tabs 的代码
这里有两个点第一个是自定义了一个model,第二个是使用 BI.Providers.getProvider("dec.provider.tab_pane").getTabPaneComponent
注意:不能直接用type:"dec.provider.tab_pane" 要使用Providers来获取el
其中自定义model是因为dec.provider.tab_pane中需要这两个content (上下文) 看代码
(function () { var e = BI.inherit(Fix.Model, { state: function () { return {//定义两个属性 favorites: [], entries: [] } }, childContext: [ "favorites","entries"],//把这两个属性传到子控件的model中 actions: { initFavs: function (callBack) { var self=this; this.model.loading = true; //初始化收藏和完整的所有的models这些都是dec.provider.tab_pane需要的 Dec.Utils.getFavoritesList(function(e) { self.model.favorites = BI.Services.getService("dec.service.frame.entry").normalizeEntries(e.data, false); callBack(); self.model.loading = false; }); Dec.Utils.getCompleteDirectoryTree(function(e) { self.model.entries = BI.Tree.transformToTreeFormat(BI.Services.getService("dec.service.frame.entry").normalizeEntries(e.data)) }) } } }); BI.model("dec.zxl.tabs", e) })();
在这个代码中注意是调用Dec.Utils.getFavoritesList, Dec.Utils.getCompleteDirectoryTree获取初始化了 两个dec.provider.tab_pane 需要的属性,并通过childContext 传给子控件。
到这一步基本上就可以使用收藏和取消收藏的功能了。