ext中PropertyGrid用法
原代码：
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../lib/ext/DynamicGrid.js"></script>
<!--<script language="javascript" src="../grid/PropsGrid.js"></script><script type="text/javascript" src="index.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 's.gif';
var tab_id = 100;
Ext.onReady(function(){
var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 200,
renderTo: 'props-panel',
source: {
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});
var datacs = [
['个人', '个人'],
['机构', '机构']
];
var Ed = Ext.grid.GridEditor;
var propsGrid = new Ext.grid.PropertyGrid({
renderTo: 'props-grid',
title: 'Properties Grid2',
width: 200,
autoHeight: true,
nameText: 'new query',
enableHdMenu: false,
viewConfig :{
// forceFit:true,
scrollOffset:2 // the grid will never have scrollbars
}
});
propsGrid.setSource({
"(名称)": "新查询",
"客户类型": "个人",
"对帐单寄送": true,
"有效地址": false,
"有效手机号": false,
"有效Email": false,
"合并持有金额":0,
"截止持有日期":new Date()
});
//实现单元格的自定义editor
propsGrid.customEditors ={
'客户类型' : new Ed(new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: new Ext.data.SimpleStore({
fields: [ 'cust_type_name','cust_type'],
data : datacs
}),
displayField:'cust_type_name',
forceSelection:true,
name:'cust_type',
valueField:'cust_type',
mode:'local'
}))
};
var PPGsource = {'x':'1','s':'2'};
propertyGrid = new Ext.grid.PropertyGrid({
renderTo: 'north',
width:700,
autoHeight:true,
frame: false,
source: PPGsource
});
PPGsource.x='33333'
alert(PPGsource.x);
})
</script>
</head>
<body>
<!-- <script type="text/javascript" src="../examples.js"></script>EXAMPLES -->
<div id="west" style="display:none">
<p>目录树</p>
</div>
<div id="north">
<p><h3>WEB系统数据库设计系统</h3></p>
</div>
<div id="show"></div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;"></div>
<div id="props-grid" style="width:200px;height:200px;overflow:hidden;"></div>
</body>
</html>
运行的键面：
