在新的fineui 后台框架中,是使用 type : dec.provider.tab_pane 来展示模板内容和显示网页,但是做自定义主题开发的时候不能直接使用它,需要给封装一个父类。
本文将讲述一个主题的例子效果如下图
其中红框部分就是
type : dec.provider.tab_pane
骨架部分代码
BI.config("dec.provider.layout", function (provider) { provider.setConfig({ type: "bi.absolute", cls: "demo-background", items: [ { el: { type: "zxl.tabs",//展示tabs实际是对于dec.provider.tab_pane的封装 }, top: 120, left: 0, right: 0, bottom: 0 }, { el: { type: "dec.header"//自定义的头部 }, height: 120, top: 0, left: 0, right: 0 }, ] }); return provider; }); }()); |
上面代码中使用了一个zxl.tabs 他是对于dec.provider.tab_pane的封装,直接使用dec.provider.tab_pane会导致调用 下面代码 时无法打开模板
BI.Services.getService("dec.service.frame.tab_pane").addItem(item) |
看下封装的 zxl.tabs 的代码
(function () { var Widget = BI.inherit(BI.Widget, { _store: function () { return BI.Models.getModel("dec.zxl.tabs") }, beforeInit: function (e) { this.store.initFavs(e); //初始化收藏和所有目录 }, render: function () { var self = this; return { type: "bi.absolute", items: [{ el: BI.Providers.getProvider("dec.provider.tab_pane").getTabPaneComponent({//不能直接用type:"dec.provider.tab_pane" 要使用Providers来获取el ref: function (e) { initHomepage();//初始化首页 }, showTabBar: true, cls: "bi-background-tab", }), top: 0, bottom: 0, right: 0, left: 0 }] }; } }); BI.shortcut("zxl.tabs", Widget); })(); |
这里有两个点第一个是自定义了一个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 传给子控件。
到这一步基本上就可以使用收藏和取消收藏的功能了。