Extjs组件render说明与Demo

最新推荐文章于 2021-06-09 16:08:24 发布

jiangwt80

最新推荐文章于 2021-06-09 16:08:24 发布

阅读量226

点赞数

分类专栏： UI 文章标签： html UI EXTJS

本文链接：https://blog.csdn.net/Maze122wt/article/details/84425693

版权

UI 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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>

jiangwt80

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs组件render说明与Demo

1.调用组件的render方法 panel.render('div');2.在配置中指定 renderTo 属性 renderTo:'div',3.配置中指定 applyTo ，这将把元素呈现到该属性的父元素上 applyTo:'divChild',4.通过指定 el 属性，指定后调用 render 方法 el:'div' panel...
复制链接

扫一扫

专栏目录