extJS 一些简略实例
日期：2014-05-16 浏览次数：20346 次
extJS 一些简单实例
<!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=UTF-8">
<title>弹出窗体的测试</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
//applyTo: 'tabs', //这里将把我们自己创建的id 为tabs 的div 渲染成tabs
activeTab: 0,
deferredRender: false,
autoTabs: true,
items: [{
title: 'Tab 1',
html: 'A simple tab',
closable: true,
listeners: {
'beforeclose':conrirmTab
}
},{
title: 'Tab 2',
html: 'Another one',
closable: true,
listeners: {
'beforeclose':conrirmTab
}
}]
});
var win = new Ext.Window({
title:'弹出窗体测试',
el:'content',//将此div 创建成窗体对象
layout:'fit',//布局
width:500,
height:300,
closeAction:'hide',//设置是否可以关闭
plain: true,
draggable:false,
maximizable:true,
minimizable:true,
modal:false,
onEsc:function aa(){
Ext.Msg.alert('aaa');
},
resizable:false,
collapsible:true,
plain:true,
items:tabs
});
function conrirmTab(e){
Ext.Msg.confirm('操作确认','操作确认',
function(btn,text){
if(btn=='yes'){
tabs.remove(e);
}
});
return false;
}
win.show(Ext.getBody());//在body 中渲染此窗体
});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</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=UTF-8">
<title>Tab多项框体的测试</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
applyTo: 'tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true,
draggable:true,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});
});
</script>
</head>
<body>
<div id='tabs'>
<div class='x-tab' title='The First Tab'>这里是The First Tab 的内容区</div>
<div class='x-tab' title='The Second Tab'>这里是The Second Tab 的内容区</div>
</div>
</body>
</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=UTF-8">
<title>Accordion布局的测试</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:document.body,
title:"容器组件",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
]
}
);
});
</script>
</head>
<body>
</body>
</html>
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
