ExtJs之Panel篇
Ext.onReady(
function() {
new Ext.Panel({
id:"myPanel",//标识
renderTo:"divPanel",//在哪个元素中渲染
title:"我的面板",
width:400,
height:300,
frame: false,//如果为true 则panel具有全部阴影，否则只有1px边框
//html:"<h1>这是在Panel中的内容...</h1>",
contentEl:'divPanelContent',//此属性可以简写成“el”，显示哪个元素中的内容
collapsible:true,
autoScroll:true,//显示滚动条，默认为false
titleCollapse:true,//是否点击整个标题栏都可以收缩
tools:[
{id:"Save",handler:function() {
Ext.Msg.alert("系统提示", "保存成功!");
}},
{id:"Help"},
{id:"Close",handler:function() {
Ext.get("divPanel").hide();
}}
],
tbar:[
{xtype:"tbfill"},
// new Ext.Toolbar.Button({text:"工具栏"}),
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
],
bbar:[
{xtype:"tbfill"},
{text:"这是状态栏"},
{xtype:"tbseparator"},
{text:"状态栏2",pressed:true,handler:function() {
Ext.Msg.alert("aaaaaaaaaaa", "aaaaaaaaaa");
}
}
],
buttons:[
{text:"该按钮位于底部！"}
],
x:100,
y:100,
//配置可拖动的
draggable: {
insertProxy: false,
onDrag : function(e) {
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e) {
this.panel.setPosition(this.x, this.y);
}}
});
}
)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../Ext/bootstrap.js"></script>
<script type="text/javascript" src="../Ext/locale/ext-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="Panel.js"></script>
</head>
<body>
<div id="divPanel"></div>
<div id="divPanelContent"> ExtJs学习，欢迎大家多多交流，共同进步</div>
</body>
</html>
上面基本的配置熟悉都有注释就不再说了，关键一下contentEl、renderTo、draggable。
contentEl：就是panel中要显示的内容，不过它的值是一个html元素的id，例如上面我们就指明为"divPanelContent"，这样panel中就会显示这个层中的内容。当然如果只是简单的内容的话，我们可以直接使用html这个属性来指明panel内部的内容。
renderTo指的是渲染到哪个元素上，因为对于Ext来说所有的我们看到的控件都是通过基本的html来模拟的，而panel要想显示就必须通过层来模拟，所以从上面你也能够看到我们指定panel渲染到"divPanel"这个Html原色上。当然对于renderTo这个属性如果我们不配置的话也是可以的，这样的话我们可以在定义好panel之后，通过panel.render("divPanel");来渲染，其实是一样的。
扩展：到这里其实稍微知道Ext的朋友都知道，除了renderTo 、render在Ext中类似的还有applyTo、applyToMarkup。