ExtXL 用户手册
ExtXL - 基于XHTML的ExtJS组件引擎

 


概述 | 映射配置 | 配置类型 | Beans |

概述

    ExtXL是ExtJS的扩展。如果你从未使用过ExtJS或需要了解更多ExtJS的信息,请访问ExtJS网站.
    Ext组件可通过一种固定的方式创建,下面的代码创建了一个面板(Panel):
new Ext.Panel({
	title:"MyPanel",
	collapsible:true,
	items:[{
		new Ext.Button({text:"Submit"});
	}],
	renderTo:"panelDiv"
})							
							
    上面的代码创建了一个标题为"MyPanel"的面板,并传如了3个配置项:'collapsible'表明面板是否可收缩,'items'表明面板的下级组件,最后该面板将被渲染到ID为'panelDiv'的Dom节点中。     在ExtXL中,上面的信息将被配置为可读性更高、结构性更强、语义更加明确的XML结构。例如:
<div ext:xtype="panel" ext:title="MyPanel" ext:collapsible="true">
	<xml xmlns="http://extxl.sourceforge.net">
		<items>
			<button text="Submit"></button>
		</items>
	</xml>
</div>
							
    配置ExtXL的模式为:一个DOM节点作为根(div或span),它可以包含一个XML子节点(xml),在子节点中可定义更多的下级组件。

映射配置

  • DOM配置
             ExtXL的DOM配置是连接ExtXL和XHTML的桥梁,一个ExtXL组件的根一定是DOM。ExtXL相关的属性将可直接配置为DOM的属性,但必须增加命名前缀"ext:"。例如:
    <div ext:xtype="panel" ext:title="MyPanel" ext:collapsible="true">
    							


  • XML配置
             若DOM还需要有子节点,则可使用XML配置,XML的子节点仍使用XML配置。如:
    <div ext:xtype="panel" ext:title="MyPanel" ext:collapsible="true">
    	<xml xmlns="http://extxl.sourceforge.net">
    		<items>
    			<button text="Submit"></button>
    		</items>
    	</xml>
    </div>
    							
  • 配置类型

        TODO Config types

    Beans