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

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"