现在我们要开始学习Extjs的组件了,先从面板开始,因为之后学习的任何组件都要依赖此组件才能显示啊。
看panel.js:
Ext.onReady(function(){
//定义一个工具菜单选项
var toolBar1 = new Ext.Toolbar({
buttons:[{
text:"新建",
handler:function(){
Ext.MessageBox.alert("新建","新建操作演示");
}
},{
xtype:"tbseparator"
},{
text:"打开"
},{
text:"保存"
}]
});
//定义一个工具菜单选项负责上下步的
var toolBar2 = new Ext.Toolbar({
buttons:[{
text:"上一步"
},{
text:"下一步"
},{
text:"退出"
}]
});
//定义一个面板
var panel2 = new Ext.Panel({
title:"最简单的Panel",
width:400,
titleCollapse:true,
collapsible:true,
html:"我是软通动力一份子",
renderTo:"d",//指定面板在哪个元素下显示 <div id="d"></div>
tbar:toolBar1,
bbar:toolBar2,
tools:[{
id:"refresh",
handler:function(event,toolEl,p){
p.getUpdater().update({url:"panel.html",scripts:true});
}
},{
id:"up",
handler:function(event,toolEl,p){
p.collapse(true);//收放面板
}
},{
id:"down",
handler:function(eventmtoolEl,p){
p.expand(true);//展开面板
}
},{
id:"help",
handler:function(event,toolEl,p){
Ext.Msg.alert("关于","我是一个大好人");
}
},{
id:"close",
handler:function(event,toolEl,p){
p.hide(); //隐藏面板
}
}]
});
});
然后html还是不写了。直接看效果图: