SUI-如何编写渲染适配器及Ext适配器范例

最新推荐文章于 2024-03-20 09:29:14 发布

最新推荐文章于 2024-03-20 09:29:14 发布 · 180 阅读

文章标签：

#EXT #Firebug #JavaScript #UI #XML #ViewUI

SUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种将SUI组件与ExtJS 2.1版本进行适配的方法，通过实现SUI.IComponent接口，使ExtJS组件能够根据不同的渲染目标父节点类型进行渲染。


function makeExtConfig(renderOption,renderConfig){
		var extConfig = {};
		for(var p in renderOption.properties){
			extConfig[p] = renderOption.properties[p];
		}

		var haslistener = false;
		for(var eventName in renderOption.listeners){
		    haslistener = true;
		    break;
		}
		if(haslistener){
			extConfig.listeners = {};
			for(var eventName in renderOption.listeners){
				extConfig.listeners[eventName] = (function(jscode){
					return function(){
						eval(jscode);
					}
				})(renderOption.listeners[eventName]);
			}			
		}
		delete extConfig.iscontainer;
		return extConfig;
}


function Ext_v2_1_adapter(adapterOption){
	adapterOption.render = function(renderOption,elRenderTo,parent){
		var extConfig = makeExtConfig(renderOption,adapterOption);

		var cmp = {};
		if(parent.object && parent.object instanceof Ext.Component){
			extConfig.renderTo = parent.object.body.dom;
			var component = parent.object.add(extConfig);
			cmp.addedToParent = true;
		}else if(parent.add){ //父对象是其他UI容器组件(非Ext)
			var component = new Ext.ComponentMgr.create(extConfig);
			component.render(elRenderTo.temp);	
			cmp.nodes = elRenderTo.temp.childNodes;
			cmp.addedToParent = false; //由父对象自己负责怎样加入Ext组件
		}else{//父对象是HTML元素节点
			if(elRenderTo.sui.getAttribute("sui")!=null){//声明节点是默认命名空间的节点
				extConfig.renderTo = elRenderTo.sui;
				elRenderTo.sui.id = "";
			}else{
				extConfig.renderTo = elRenderTo.parent;
			}
			var component = new Ext.ComponentMgr.create(extConfig);
			cmp.addedToParent = true;
		}


		cmp.isContainer = component instanceof Ext.Container;
		cmp.object = component;

		if(cmp.isContainer){
			cmp.body = component.body.dom;
			cmp.add = function(mixObj){
				if(mixObj.object instanceof Ext.Component){
					if(mixObj.object.ownerCt && mixObj.object.ownerCt != component)return;
					return component.add(mixObj.object);
				}else if(mixObj.nodes){
					for(var i=0,l=mixObj.nodes.length; i<l;i++){
						cmp.body.appendChild(mixObj.nodes[0]);
					}
				}else{
					cmp.body.appendChild(mixObj);
				}
			};
		}	    
		return cmp;
	}
	SUI.Render.call(this,adapterOption);
}
Ext_v2_1_adapter.prototype = new SUI.Render;

在以上代码中Ext_v2_1_adapter继承了SUI.Render基类,它根据SUI传递过来的renderOption创建Ext Component，并依据渲染目标父节点的不同情况渲染节点或者让父节点渲染它，然后返回一个临时对象，该对象实现了SUI的component接口
----------------
SUI.IComponent
----------------
isContainer 组件是否为容器
object 组件对应的实例对象
addedToParent 组件是否已经添加到父节点
----------------

-----------------------
SUI.IContainerComponent
-----------------------
isContainer
object
addedToParent
add 实现如何添加子对象
body 指明容器对象真正容纳子节点的Dom节点
-----------------------

如果有以下节点(html文件中)和如下配置(config.xml中)

	<ui:panel id="p2" style='visibility:visible;' title="小面板" width="300" collapsible="true" oncollapse="pnl2_collapse(this)">


<panel iscontainer="true">
		<render name="Ext" version="2.1" src="org.ext.sui-adapter:Ext_v2_1_adapter" selected="true" browser="IE|Opera|Gecko" >	
			<property xtype="panel" ></property>
		</render>
	</panel>

那么SUI传递给适配器的render方法的renderOption参数在firebug里显示为：
listeners
collapse "pnl2_collapse(this)"
properties
collapsible true
id "p2"
iscontainer "true"
style "visibility: visible;"
title "小面板"
width 300
xtype "panel"

经makeExtConfig转换后就得到了实例化Ext Component所需要的Option对象

listeners
collapse function()
collapsible true
id "p2"
style "visibility: visible;"
title "小面板"
width 300
xtype "panel"