ExtJS学习随笔第一篇--布局

最新推荐文章于 2021-06-16 20:29:05 发布

最新推荐文章于 2021-06-16 20:29:05 发布 · 114 阅读

文章标签：

#EXT #Java #CSS #工作 #HTML

ExtJS学习专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用ExtJS创建包含可折叠面板及顶部、底部工具栏的应用实例，展示了如何配置面板属性如布局、宽度等，并通过具体代码实现自定义按钮与内容。

其中几个属性比较重要
layout:'accordion'//是否折叠。
renderTo:'panelone'//相当与ID的名字。

其中bar的种类这里有两种。
tbar //顶上的
bbar//底部的
buttons//按纽
items这个在ExtJS里面使用的比较多。

 Ext.onReady(function(){    
       new Ext.Panel({
            renderTo:"panelone",
			title:"工作台",
			layout:'accordion',
			width:400,
			height:400,
			/**html:'<h1>搞什么啊这里是工作区域</h1>',**/
			tbar:[{pressed:true,text:'刷新'},{text:'开始'},{text:'开始2'},{text:'开始3'}],
			bbar:[{perssed:true,text:'BBAR工具栏'}],
        	buttons:[{text:'按纽'}],
        	items:[
        	{title:'行1',width:100,html:'搞什么啊这里是工作区域1'},
        	{title:'行2',width:100,html:'搞什么啊这里是工作区域1'},
        	{title:'google页',width:380,html:'<iframe src="http://www.google.cn" ></iframe>'},
        	{title:'行4',width:130},
        	{title:'行5',columnwidth:1}

        	]
        });


     }

     );

当然最后要在HTML页面加上一个
<div id="panelone" />

我这边就用了一个css和两个JS


<link rel="stylesheet" type="text/css"
			href="resources/css/ext-all.css" />
		<script type="text/javascript" src="js/adapter/ext/ext-base.js"> </script>
		<script type="text/javascript" src="js/ext-all.js"> </script>