<html>
<head>
<title>cutter_point论坛</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-all.js"></script><!-- // 引入ext核心组件及驱动
-->
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript" src="ext/bootstrap.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function(){
//添加panel的函数
var addPanel = function(btn, event) {
var n;
n = tab.getComponent(btn.id);
if(n)
{
tab.setActiveTab(n);
return;
}
n = tab.add( {
id : btn.id,
title : btn.id,
html : '<iframe width=100% height=100% src=' + btn.id + ' />',
//autoLoad : '',
closable : 'true'
});
tab.setActiveTab(n);
}
// sample static data for the store
var myData = [
['组长', '肖锋', 'supperMan'],
['大兵一号', 'xxx', 'xxxx'],
['大兵二号', 'xxx', 'xxxx'],
['大兵三号', 'xxx', 'xxxx'],
['大兵四号', 'xxx', 'xxxx'],
['大兵五号', 'xxx', 'xxxx']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price'},
{name: 'change'},
],
data: myData
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
hideCollapseTool: true,
store: store,
columnLines: true,
columns: [
{
text : '职位',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : '姓名',
width : 75,
sortable : true,
dataIndex: 'price'
},
{
text : '性别',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
],
title: '成员表 (Click header to collapse)',
viewConfig: {
stripeRows: true
}
});
var item1 = grid;
var item2 = Ext.create('Ext.Panel', {
title: 'Gategory管理',
// html: '<empty panel>',
cls:'empty',
items :
[
Ext.create
(
'Ext.Button',
{
id : 'Category-list',
text : 'Category列表',
width : 200,
listeners :
{
//alert('ext','welcome you!');
click : addPanel
}
}
),
Ext.create
(
'Ext.Button',
{
id : 'test',
text : 'test',
width : 200,
listeners :
{
//click : addPanel
}
}
)
]
});
var item3 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls:'empty'
});
var item4 = Ext.create('Ext.Panel', {
title: 'Accordion Item 4',
html: '<empty panel>',
cls:'empty'
});
var item5 = Ext.create('Ext.Panel', {
title: 'Accordion Item 5',
html: '<empty panel>',
cls:'empty'
});
var accordion = Ext.create('Ext.Panel', {
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3, item4, item5]
});
//右边的页面嵌入
var tab = Ext.createWidget('tabpanel', {
region:'center',
margins:'5 5 5 0',
split:true,
layout:'accordion',
bodyStyle:'background:#f1f1f1',
activeTab: 0, //这个是激活第一个panel
items : [ {
title : 'index',
//html : 'aaaaaa'
loader : { url : "Category_add.jsp", autoLoad : true}
} ]
});
//这个是总的布局
var viewport = Ext.create('Ext.Viewport', {
layout:'border',
items:
[
accordion, /*{
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'<br/><br/><empty center panel>'
}*/
tab
]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="ext/shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
【struts2】一个BBS论坛初步显示index.html
最新推荐文章于 2015-03-28 10:46:26 发布