全部
博文收录
Ada助手
问答

ext Panel+toolbar+button 实作带注释

iiitom 2008-06-26 12:34:55

实作了一个ext panel的demo,
想上来跟论坛的朋友分享,
本来想发在一直逛的java web论坛，
结果发现我们社区原来是有JavaScript分版的，
第一次在这里发帖，多谢支持

以下是demo的源文件

文件已打包上传到CSDN下载频道,
下载地址 : http://download.csdn.net/source/514060

exttest.html
-----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Panel</title>
<link href="../resources/css/ext-all.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="panel.js"></script>

<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
padding:10px;
}
</style>
</head>
<body>
<div id="cc1">Panel[1] 的内容...</div>
<div id="cc2">Panel[2] 的内容...</div>
<div id="cc3">Panel[3] 的内容...</div>

<div id="clist">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>

</body>
</html>

------------------------------------------

panel.js

------------------------------------------
/*
*练习Panel
*/
Ext.onReady(function(){
newPanel(1);
newPanel(2);
newPanel(3);
});
// button 对象调用的函数(handler)
function dosth(btn){
if(btn.param==""){
return;
}
alert(btn.param);
}
/**
制造Panel, id 为参数
程式已写死:提供内容的div前缀为 cc (即 contentEl:"cc"+id )
放置Panel的div前缀为 c (即 renderTo: 'c'+id,)
*/
function newPanel(id){

//按钮
var btn1=new Ext.Button({
text:"访问",
handler:dosth,
param:'访问按钮'+''
// menu:[
// {icon:"open.jpg",text:"打开"},
// {icon:"save.jpg",text:"保存"},
// {text:"关闭"}]
});

//按钮
var btn2=new Ext.Button({
text:"文件",
handler:dosth,
param:''+'',
menu:[
{icon:"open.jpg",text:"打开"},
{icon:"save.jpg",text:"保存"},
{text:"关闭"}]
});

//工具条
var tb = new Ext.Toolbar({
width:400,
// height:30,
items:[btn1,btn2] //工具条中加入button
});

//Panel
var p1 = new Ext.Panel({
tbar : tb,
title: 'My Panel1',
collapsible:true,
renderTo: 'c'+id,
width:400,
// html: "content1"
contentEl:"cc"+id
});

// 改变panel收缩状态
// p1.toggleCollapse();
}

----------------------------------------------

...全文

给本帖投票