ExtJs控件Panel面板的简单介绍及其小示例
今天通过学习，做了两个有关ExtJs控件Panel的小示例，对它又有了进一步的了解。但是还是存在着许多问题。希望能够得到解决。
面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大
多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同
组织方式形成。
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、
面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重
用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本
身是一个容器，他里面又可以包含各种其它组件。
面板的类名为Ext.Panel，其xtype 为panel。
以下代码是可以显示面板的各个部分：
在JSP页面中写ExtJs的代码时，要记得导入相关的文件：
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.0.0/ext-all.js"></script>
注意：以上这三个文件的导入，顺序是不能变的！！
（1） JS部分：
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hi",//把面板添加到id为hi的div中
titile:"面板的标题",
width:400,//面板的高度
height:500,//面板的高度
html:"<h1>面板的主题内容</h1>",
tbar:[{text:"顶部工具toptoolbar"},{pressed:true,text:"刷新"}],
bbar:[{text:"底部工具bottomtoolbar"}],
buttons:[{text:"位于footer底部"},{text:"测试提交"}]
]
});
});
</script>
HTML部分：
<body>
<div id="hi">
</div>
</body>
运行显示的效果如下：
在此基础上，写出工具栏的相关内容：
以下是我写的工具栏的一些代码：
这是JS部分：
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hi",//把面板添加到id为hi的div中
titile:"面板的标题",
width:400,//面板的高度
height:500,//面板的高度
html:"<h1>面板的主题内容</h1>",
tbar:[{text:"顶部工具toptoolbar"},{pressed:true,text:"刷新"}],
bbar:[{text:"底部工具bottomtoolbar"}],
buttons:[{text:"位于footer底部"},{text:"测试提交"}]
tools:[{id:"save",//设置工具栏选项种类
hander:function(){
Ext.MessageBox.alert("保存的操作");
}},
{id:"help"},
{id:"exit"},
{id:"close"},
{id:"minimize"},
{id:"maximize"},
{id:"restore"},
{id:"gear"},
{id:"pin"},
{id:"unpin"},
{id:"up"},
{id:"left"},
{id:"right"},
{id:"dowm"},
{id:"refresh"},
{id:"minus"},
{id:"plus"},
{id:"search"},
{id:"print"},
]
});
});
</script>
问题：不知道这样写出来，运行时，没有显示，请问高手们，这是为什么呢？？
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
