Extjs组件render说明与Demo

1.调用组件的render方法
   panel.render('div');

2.在配置中指定 renderTo 属性
   renderTo:'div',

3.配置中指定 applyTo ,这将把元素呈现到该属性的父元素上
   applyTo:'divChild',

4.通过指定 el 属性,指定后调用 render 方法
   el:'div'
   panel.render();

5.通过调用 show 方法
   panel.show(); //一般用在显示已经被 hide 的元素上


Demo is EXTJS 2.0版本--需要引入EXT必要文件,才可以运行

	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="extjs/js/ext-base.js"></script>
	<script type="text/javascript" src="extjs/js/ext-all.js"></script>
	<script type="text/javascript" src="extjs/js/ext-lang-zh_CN.js"></script>
	
		
	<script type="text/javascript">
		Ext.onReady(function(){
			var box = new Ext.BoxComponent({
				el:'test2',
				style:'background-color:green;position:absolute;',
				pageX:200,
				pageY:250,
				width:200,
				height:150
			});
			box.render();
		
			var panel = new Ext.Panel({
				el:'test',
				title:'测试标题',
				floating:true,
				shadow:true,
				draggable:true,
				collapsible:true,
				html:'测试内容',
				pageX:100,
				pageY:50,
				width:200,
				height:150
			});
			panel.render();
		});
	</script>

  </head>
  
  <body>
    <div id="test"></div>
    <div id="test2"></div>
  </body>

你可能感兴趣的:(html,UI,ExtJs)