1、oa-default-desktop-submenu-tree-view
2、父组件
oa-default-desktop-submenu-view
里面有left组件
3、属性ref：
{"id":"EXTJS-TREE","config":{"dataUrl":"tpl:<@$ds_url_query active=1/>","json":"false","TREE.bodyCfg":"{cls:'x_menu_body_style'}","TREE.headerCfg":"{cls:'x_menu_panel_head'}","lpc.leaf":"dt-script:function(a){return !a.hasChild;}","lpc.text":"name"}}
4、
DataSourceUrlDirective中代码执行 id 为空
DataSourceExplorer dse;
if(null == id) {
dse = cache.get();
} else {
dse = cache.get(id);
}
dse其实是属性menu-data-source的属性，然后转成了dataurl所需要的值
dataUrl: '/dev/sys/ds?$$def=%7B%22lastModifiedTime%22%3A%222014-04-10+16%3A33%3A24%22%2C%22id%22%3A%22menu-data-source%22%2C%22ref%22%3A%7B%22id%22%3A%22feb3c56919ec40f69b35d379ef7ec9e6%22%2C%22config%22%3A%7B%7D%7D%2C%22sn%22%3A2%2C%22category%22%3A%22DATA_SOURCE%22%2C%22lastModified%22%3A1374216325928%2C%22active%22%3A%221%22%2C%22%24id%22%3A%223ccd06e6138746ffac0858face955e7f%22%7D&$CMD=query&active=1',
//
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by Fernflower decompiler)
//
package com.ml.comp.engine.view.impl;
import com.ml.comp.engine.DefUtils;
import com.ml.comp.engine.ds.DataSourceExplorer;
import com.ml.comp.engine.render.RenderContext;
import com.ml.comp.engine.view.impl.DataSourceCache;
import com.ml.comp.engine.view.impl.DirectiveBase;
import com.ml.cs.Server;
import com.mw.utils.xt;
import freemarker.core.Environment;
import freemarker.template.TemplateDirectiveBody;
import freemarker.template.TemplateException;
import freemarker.template.TemplateModel;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
public abstract class DataSourceUrlDirective extends DirectiveBase {
private RenderContext ctx;
public DataSourceUrlDirective(RenderContext ctx) {
this.ctx = ctx;
}
protected abstract String getCmd();
public void execute(Environment env, Map map, TemplateModel[] models, TemplateDirectiveBody body) throws TemplateException, IOException {
String id = (String)xt.nvl((String)this.unwrap(env, map.get("$id")), (Object)null);
DataSourceCache cache = (DataSourceCache)this.ctx.get(DataSourceCache.class);
if(null == cache) {
throw new TemplateException("No data source associate width component " + this.ctx.getCompoundComponent().getDefinition().getId(), env);
} else {
DataSourceExplorer dse;
if(null == id) {
dse = cache.get();
} else {
dse = cache.get(id);
}
StringBuilder sb = new StringBuilder();
com.ml.cs.core.RenderContext rc = Server.getRenderContext();
if(null != rc) {
String params = (String)rc.get("$modulePath");
if(null != params) {
sb.append(params);
} else {
sb.append(rc.getServerPath());
}
}
sb.append("/ds?$$def=").append(DefUtils.encodeDefinition(dse.getDataSourceDefinition(), true)).append("&$CMD=").append(this.getCmd());
HashMap params1 = new HashMap();
Iterator i$ = map.entrySet().iterator();
Entry e;
Object o;
while(i$.hasNext()) {
o = i$.next();
e = (Entry)o;
params1.put(e.getKey(), this.unwrap(env, e.getValue()));
}
i$ = params1.entrySet().iterator();
while(i$.hasNext()) {
o = i$.next();
e = (Entry)o;
sb.append("&").append(e.getKey()).append("=").append(this.encode(xt.vs(e.getValue())));
}
env.getOut().write(sb.toString());
}
}
private String encode(String s) {
try {
return URLEncoder.encode(s, this.ctx.getCharset());
} catch (Exception var3) {
return s;
}
}
}
5、参考leftleft的渲染分析一下
(function ()
{
function expandTreeNode(node, selectChild) {
if (!node.isLeaf()) {
node.expand(false, false, function () {
if (!selectChild) {
return;
}
var child = node.firstChild;
if (child) {
if (child.isLeaf()) {
child.select();
} else if (selectChild) {
expandTreeNode(child, true);
}
}
});
}
}
function render()
{
var treeUI = new (
(function(){
var Tree = function(config)
{
Ext.apply(this, config);
Tree.superclass.constructor.call(this);
};
function render()
{
var me = this;
var tree = new _TreePanel({
border:false,
rootVisible: false,
autoScroll: true,
root: {
'name':'ROOT','id':'#root', nodeType: 'async'
},
dataUrl: '/dev/sys/ds?$$def=%7B%22lastModifiedTime%22%3A%222014-04-10+16%3A33%3A24%22%2C%22id%22%3A%22menu-data-source%22%2C%22ref%22%3A%7B%22id%22%3A%22feb3c56919ec40f69b35d379ef7ec9e6%22%2C%22config%22%3A%7B%7D%7D%2C%22sn%22%3A2%2C%22category%22%3A%22DATA_SOURCE%22%2C%22lastModified%22%3A1374216325928%2C%22active%22%3A%221%22%2C%22%24id%22%3A%223ccd06e6138746ffac0858face955e7f%22%7D&$CMD=query&active=1',
'autoLoadData':true,'enableDD':false,'useDefaultIcon':true,'headerCfg':{cls:'x_menu_panel_head'},'bodyCfg':{cls:'x_menu_body_style'}, loaderConfig: {propertyConfig:{'text':'name','leaf':function(a){return !a.hasChild;}},'showCheckbox':false}
});
var state;
me.saveState = function(attr)
{
state = [];
function vn(node)
{
node.eachChild(function(ch)
{
if(!ch.isExpanded())
{
return;
}
state.push(ch.getPath(attr));
vn(ch);
});
}
vn(tree.root);
me.stateSaved = true;
};
me.restoreState = function(attr)
{
me.stateSaved = false;
if(!state)
{
return;
}
for(var i = 0; i < state.length; i++)
{
tree.expandPath(state[i], attr);
}
};
me.panel = tree;
me.expandAll = function()
{
tree.expandAll();
};
me.collapseAll = function()
{
tree.collapseAll();
};
me.expandFirst = function()
{
if(tree.root.firstChild)
{
tree.root.firstChild.expand();
}
};
(function(){}).call(me);
return tree;
}
return Ext.extend(Tree, Ext.util.Observable, {doRender: render});
})())({parentId:'0a7a3914acc54daab9741a811c23d64f'});
var tree = treeUI.doRender();
tree.loader.on('createNode',function(loader,attr){
var obj = Ext.decode(attr.data);
if(obj.name && obj.name.indexOf("(")!=-1){
attr.text = obj.name;
}
var path = obj.iconCls;
if(path && path != "" && path.length>=4){
path = path.substring(4);
path = Platform.renderSysPath(path);
attr.icon = path;
}
});
tree.loader.on('getparam', function (me, n, p)
{
p.parentId = '#root' == n.id ? treeUI.parentId : n.id;
});
var iconCls = '/dev/sysicons/sys_top_menu/s8.gif';
var img = "";
if(iconCls && iconCls!="" && iconCls != "default-icon-menu-item"){
img = '
';
}else{
img = '
';
}
tree.setTitle(img+' ƽ̨����');
//tree.setTitle("aaaaaaaaaaaaaaa");
var expandMode = '3';
if(expandMode == '1')
{
tree.expandAll();
//修改全部展开的时候，没有选中第一个节点bug，修改人yyj--start
tree.on('expandnode',function(node){
/* */
//当全部节点展开的时候，展开一个节点就会触发这个expandnode事件
//要展开第一个节点的叶子，需要满足两个条件，
//1.该节点是root节点的第一个子节点的子节点，
//2.该节点是叶子节点
if(node.isLeaf()){
var Child=this.root.firstChild;
while(Child&&Child.firstChild!=null){
Child=Child.firstChild;
}
if(Child&&Child==node){
node.select();
}
}
});
//修改全部展开的时候，没有选中第一个节点bug，修改人yyj--end
}
else if(expandMode == '3')
{
tree.on('load', function (node)
{
if(!node.parentNode)
{
treeUI.expandFirst()
}
})
tree.on('expandnode',function(node){
/* */
if (node==this.root){
//var child=node.firstChild;
//if (child) child.select();
if (node.firstChild && node.firstChild.isLeaf()) {
node.firstChild.select();
}else if (node.firstChild && !node.firstChild.isLeaf()) {
expandTreeNode(node.firstChild, true);
}
}
})
}
var loadContent = function (contentPanel, cfg)
{
var addTab = function (obj,oldIndex)
{
if(!obj.title)
{
if(obj.setTitle) obj.setTitle(cfg.viewName)
}
if(!obj.closable)
{
obj.closable = true
}
obj.url = cfg.url;
if(cfg.loadViewMode == '2')
{
__checkEditingForm(contentPanel,function(){
var url = cfg.url;
var viewName = cfg.name;
if(!Ext.globalEventMonitor.fireEvent('beforemodulechange', url, viewName)) return;
contentPanel.removeAll(true);
if(obj instanceof Ext.TabPanel)
{
contentPanel.add(obj);
}
else
{
contentPanel.add({url:cfg.url, xtype:'tabpanel', items:obj});
}
contentPanel.doLayout();
contentPanel.items.first().setActiveTab(0);
});
}
else
{
var tabpanel = contentPanel.items.first();
if(tabpanel)
{
// var panel;
// if(obj instanceof Ext.TabPanel){
// panel=obj.items.first();
// }else {
// panel=obj;
// }
if(oldIndex === undefined || oldIndex === -1){
tabpanel.add(obj).show();
}else{
tabpanel.insert(oldIndex,obj).show();
}
}
else
{
if(obj instanceof Ext.TabPanel)
{
contentPanel.add(obj);
}
else
{
contentPanel.add({url:cfg.url, xtype:'tabpanel', items:obj});
contentPanel.items.first().setActiveTab(0);
}
contentPanel.doLayout();
}
}
};
var tabpanel = contentPanel.items ? contentPanel.items.first() : null;
var oldIndex = -1;
if(tabpanel && cfg.loadViewMode !== '2')
{
//new Tab中打开 查找是否已经打开了这个tab
var findtab = false;
tabpanel.items.each(function (item, index)
{
if(item.url == cfg.url)
{
findtab = true;
tabpanel.setActiveTab(index);
if(cfg.isRefresh=="1"){
if(item.parentView && item.parentView.treePanel){
item.parentView.treePanel.reload(true);
}
if(item.parentView && item.parentView.gridPanel){
item.parentView.gridPanel.store.reload();
}
//tabpanel.remove(index);
//oldIndex = index;
}
return false;
}
if(!cfg.url || cfg.url==""){
findtab = true;
}
});
if(findtab) return;
}
// contentPanel.removeAll(true);
if(cfg.url)
{
if(cfg.linkType == '1' || cfg.linkType=='4')
{
var path;
if(cfg.path)
{
path = '/dev' + cfg.path;
}
else
{
path = '/dev/sys';
}
ViewEngine.loadViewWidthPath(path, cfg.url, {pid:cfg.id, viewName:cfg.viewName}, function (view)
{
view.openMode = 'ext-tab';
view.navigationTree = tree;
var obj = view;
if(view.parentView){
obj = view.parentView
}
obj.on("refreshstatistic",function(type,size){
tree.reload(true);
});
if(obj.gridPanel && cfg.statistics && cfg.statistics==="1"){
var getStatisticsMenus = function(compIds){
var ret = [];
MW.srv({
args: [compIds],
sync:true,
url: '/dev/sys/service/sys-menu-service.statisticsMenu',
success: function(obj)
{
ret = obj;
}
});
return ret;
}
obj.gridPanel.store.on("load",function(a){
var compIds = [];
compIds.push(cfg.url);
var numObj = getStatisticsMenus(compIds);
var num = numObj[cfg.url] || 0;
var treeModel = tree.getSelectionModel();
var node = treeModel.getSelectedNode();
node.setText(cfg.viewName+"("+num+")");
});
}
view.id = cfg.url;
addTab(view,oldIndex);
},{containerHeight:contentPanel.body.getHeight()});
}
else if(cfg.linkType == '2')
{
try
{
var evalResult=eval("(function(){return " + cfg.url + "})();");
if (evalResult instanceof Ext.Panel) {
//返回一个panel的时候直接加到那里面
addTab(evalResult);
}else if(Ext.isFunction(evalResult)){
var evalFnCallBack=function(panel){
if (panel instanceof Ext.Panel) addTab(panel);
}
evalResult=evalResult.call(this,evalFnCallBack,contentPanel);
if (evalResult instanceof Ext.Panel) addTab(evalResult);
}
}
catch(e)
{
eval(cfg.url);
}
}
else
{
if(cfg.loadViewMode == '1')
{
window.open(cfg.url, '_blank', 'height=600, width=1024,Scrollbars=yes,Toolbar=no,Location=no,Direction=no,Resizable=yes,');
}
else
{
addTab({title:cfg.viewName, html:''},oldIndex);
}
}
}
};
var contentPanel = new Ext.Panel({layout:'fit', region:'center', border:false});
var linkType = '1';
var url = '';
var loadViewMode = '1';
//loadContent(contentPanel, {url:url, linkType:linkType, loadViewMode:loadViewMode});
var panel = new Ext.Panel({
layout:'border',
border:false,
items:[
{
layout:'accordion',
border:false,
bodyStyle:'margin:0 3px 3px 0;',
region:'west',
split:true,
collapsible:false,
collapseMode:'mini',
'width':150,'minSize':150,'maxSize':300,'homePageTitle':'首页',
bodyCfg:{
cls:'left_menu_panel_body'
},
items:tree
},
contentPanel
]
});
function handleNodeClick(n){
var url = n.attributes.url;
var viewName = n.attributes.name;
var id = n.attributes.id;
var d = n.attributes.data;
if(!d)
{
return;
}
d = Util.jsonDecode(d);
if(null === d)
{
return;
}
if(!url)
{
if(!d.url && d.layoutId && 'none' != d.layoutId)
{
//d.url = d.layoutId;
}
if(!d.url)
{
return;
}
n.attributes.url = url = d.url;
}
loadContent(contentPanel, Ext.applyIf({id:id, url:url, viewName:viewName}, d));
}
tree.getSelectionModel().on('selectionchange', function (sm,n){handleNodeClick(n);});
tree.on('click',function(n){
if(tree.getSelectionModel().getSelectedNode()==n){handleNodeClick(n);}
});
panel.on('afterrender', function()
{
});
return panel;
}
return Ext.extend(Ext.util.Observable, {doRender:render});
})()
