test
来源：互联网 发布：淘宝大v是什么意思 编辑：程序博客网 时间：2024/05/23 01:14
Ext.onReady(function() {
xg = Ext.grid;
var Record = Ext.data.Record.create([{
name : 'sid'
}, {
name : 'name'
}, {
name : 'port'
}, {
name : 'status'
}]);
store = new Ext.data.Store({
reader : new Ext.data.XmlReader({
totalRecords : "rowCount",
record : "row"
}, Record),
remoteSort : false
});
var sm = new xg.CheckboxSelectionModel({
hidden : false,
singleSelect : false
});
var cm = new Ext.grid.ColumnModel([new xg.RowNumberer(), {
header : "<input type='checkbox' name='selectAll' checked onclick='selectAllDeal(this)'>",
width : 30,
sortable : false,
dataIndex : 'sid',
renderer : function(value, p, record) {
return "<input type='checkbox' name='select' checked>";
}
}, {
header : "服务名称",
width : 220,
sortable : false,
dataIndex : 'name'
}, {
header : "服务端口",
width : 180,
sortable : false,
dataIndex : 'port'
}, {
header : "服务状态",
width : 180,
sortable : false,
dataIndex : 'status',
renderer : function(value, p, record) {
if (value == '运行中') {
return "<div style='text-decoration: none;'<span class='run'></span> 运行中</div>";
} else {
return "<div href='#'style='text-decoration: none;'<span class='stop'></span> 已停止</div>";
}
}
}]);
cm.defaultSortable = true;
grid = new Ext.grid.GridPanel({
store : store,
cm : cm,
width : getOffsetWidth(),
height : 409,
region : 'center',
enableColumnHide : false,
enableHdMenu : false,
enableColumnMove : false,
stripeRows : true,
loadMask : true,
frame : true,
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : false
}
});
// 基本表单面板
var form = new Ext.form.FormPanel({
title : '服务启停',
region : 'center',
buttonAlign : 'center',
border : true,
items : [grid],
buttons : [{
text : '启 动',
minWidth : 80,
handler : ''
}, {
text : '停 止',
minWidth : 80,
handler : ''
}]
});
// 测试数据
var record = new Record();
var data = [new Record({
'sid' : '1',
'name' : 'HTTP接收服务',
'port' : '8080',
'status' : '运行中'
}), new Record({
'sid' : '2',
'name' : 'UDP接收服务',
'port' : '3000',
'status' : '已停止'
}), new Record({
'sid' : '3',
'name' : 'Socket接收服务',
'port' : '8808',
'status' : '已停止'
}), new Record({
'sid' : '4',
'name' : 'Syslog接收服务',
'port' : '514',
'status' : '运行中'
})];
for (var i = 0; i < data.length; i++) {
store.insert(i, data[i]);
}
// 用Viewport为deployForm之容器，可以铺满页面
var viewPortPanel = new Ext.Viewport({
renderTo : document.body,
frame : true,
layout : 'border',
items : [form]
});
// 窗口大小发生改变的时候调整grid的高度和宽度
window.onresize = function() {
grid.setWidth(getOffsetWidth());
grid.setHeight(getOffsetHeight() - 65);
}
//grid.setWidth(getOffsetWidth());
grid.setHeight(getOffsetHeight() - 65);
});
// 点击全选触发的事件
function selectAllDeal(obj) {
if (obj.checked) {
checkAllByName('select');
} else {
unCheckAllByName('select');
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>服务列表</title>
<link href="../css/css_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../extJs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/extbackground.css" />
<link rel="stylesheet" type="text/css" href="../css/service.css" />
<link rel="stylesheet" type="text/css" href="../css/css_style.css" />
<link rel="stylesheet" type="text/css" href="../css/table_style.css" />
<script type="text/javascript" src="../extJs/ext-base.js"></script>
<script type="text/javascript" src="../extJs/ext-all.js"></script>
<script type="text/javascript" src="../extJs/ext-ex.js"></script>
<script type="text/javascript" src="../extJs/util.js"></script>
<script type="text/javascript" src="../extJs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/service/service_index.js"></script>
<style type="text/css">
.x-grid3-hd-inner {
color:#2255BC;
}
.x-btn-mc {
color:red;
}
</style>
</body>
</html>
