代码如下：
<!DOCTYPE HTML PUBLIC "-//W 3C //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>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
< script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" >
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');
var data = [['1', 'male', 'name1', 'descn1'], ['2', 'female', 'name2', 'descn2'], ['3', 'male', 'name3', 'descn3'], ['4', 'female', 'name4', 'descn4'], ['5', 'male', 'name5', 'descn5']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [{
name: 'id'
}, {
name: 'sex'
}, {
name: 'name'
}, {
name: 'descn'
}])
});
ds.load();
var cm = new Ext.grid.ColumnModel([{
header: '序号',
dataIndex: 'id'
}, {
header: '性别',
dataIndex: 'sex',
renderer: function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>男<//span>";
}
else {
return "<span style='color:green;font-weight:bold;'>女<//span>";
}
}
}, {
header: '名称',
dataIndex: 'name'
}, {
header: '描述',
dataIndex: 'descn'
}]);
var grid = new Ext.grid.GridPanel({
// el:'hello-grid',
region: 'north',
store: ds,
cm: cm,
width: 300,
frame: true,
height: 200
});
grid.on('rowclick',onRowDbClick);
function onRowDbClick(grid,rowIndex,e)
{
var row = grid.store.data.items[rowIndex];
formPanel.form.findField("name").setValue(row.data["name"]);
}
var formPanel = new Ext.form.FormPanel({
labelWidth: 70,
labelAlign: 'right',
height: 300,
// el:'hello-form',
region: 'center',//定位
items: [{
xtype: 'fieldset',
title: '基本信息',
autoHeight: true,
items: [{
layout: 'column',
border: false,
defaults: {
border: false
},
items: [{
columnWidth: .5,
layout: 'form',
defaultType: 'textfield',
defaults: {
width: 120
},
items: [{
xtype: "hidden",
name: "id"
}, {
fieldLabel: '用户名',
name: 'name',
width: 120
}]
}, {
columnWidth: .5,
layout: 'form',
defaultType: 'textfield',
defaults: {
width: 104
},
items: [{
inputType: 'password',
fieldLabel: '密码',
name: 'password'
}]
}]
}, {
layout: 'form',
border: false,
defaults: {
border: false
},
defaultType: 'textfield',
items: [{
width: 300,
name: "email",
fieldLabel: '电子邮箱'
}]
}]
}, {
xtype: 'fieldset',
title: '备注信息',
autoHeight: true,
items: [{
xtype: "textarea",
width: 380,
height: 80,
name: "remark",
hideLabel: true
}]
}]
});
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
// el:'hello-win',
// layout:'fit',
layout:'border',
width:600,
height:500,
closeAction:'hide',//关闭窗口时渐渐缩小
plain: true,
items:[formPanel,grid],
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<
<div id="hello-win" class="">
<div id="hello-grid"></div>
<div id="hello-form" >
</div>
</div>
</body>
</html>
2859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
