搭建环境
Eclipse项目工程: Extjs
ext-js/resources
/shared
/bootstrap.js
/ext.js
/ext-all.js
/ext-all-debug.js
/ext-all-debug-w-comments.js
/ext-all-dev.js
/ext-debug.js
/ext-dev.js
WEB-INF
index.html
xml-grid.js
配置文件(这里没有部署到默认的webapps下)。
C:\software\apache-tomcat-6.0.32\conf\Catalina\localhost\extjs.xml
extjs.xml内容:
<Context path="/extjs" reloadable="true" docBase="C:\PMD\Extjs\WebContent" />
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css"
href="./ext-js/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext-js/bootstrap.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>
</head>
<body>
<div id="example-grid"></div>
</body>
</html>
xml-grid.js:
Ext
.onReady(function() {
Ext
.define(
'profile',
{
extend : 'Ext.form.FieldSet',
alias : 'widget.profile',
itemId : 'profile',
width : 500,
title : 'Client Profile',
collapsible : true,
layout : 'column',
defaults : {
labelWidth : 150,
labelStyle : 'font-size: 11px;',
fieldStyle : 'font-size: 11px;'
},
items : [
{
xtype : 'datefield',
itemId : 'clientID',
fieldLabel : '<a class="black" tabindex="-1" href="javascript:showHelp(\'Client ID\');">Client ID</a><font color=red>*</font>',
name : 'clientId',
columnWidth : 0.7
},
{
xtype : 'displayfield',
itemId : 'cliendIdBlank',
columnWidth : 0.3
},
{
xtype : 'combo',
itemId : 'PA1200_CLIENT_NAME',
fieldLabel : '<a href="javascript:showHelp(\'Client Name\');">Client Name</a><font color=red>*</font>',
name : 'clientName',
store : new Ext.data.ArrayStore(
{
fields : [ 'value','text' ],
data : [
[ '','Select One' ],
[ 'E','Enrolled (E)' ],
[ 'T','Terminated (T)' ],
[ 'L','LOA (L)' ],
[ 'S','Suspended (S)' ]
]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
editable : false,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
columnWidth : 0.7
},
{
xtype : 'displayfield',
columnWidth : 0.3
},
{
xtype : 'combo',
itemId : 'PA1200_ADDRESS_LINE_1',
fieldLabel : '<a href="javascript:showHelp(\'Address 1\');">Address 1</a>',
name : 'addressLine1',
store : new Ext.data.ArrayStore(
{
fields : [ 'value','text' ],
data : [
[ '','Select One' ],
[ 'E','Enrolled (E)' ],
[ 'T','Terminated (T)' ],
[ 'L','LOA (L)' ],
[ 'S','Suspended (S)' ]
]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
editable : false,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
columnWidth : 0.7
},
{
xtype : 'displayfield',
columnWidth : 0.3
},
{
xtype : 'combo',
id : 'PA1200_ADDRESS_LINE_2',
itemId : 'PA1200_ADDRESS_LINE_2',
fieldLabel : '<a href="javascript:showHelp(\'Address 2\');">Address 2</a>',
name : 'addressLine2',
store : new Ext.data.ArrayStore(
{
fields : [ 'value','text' ],
data : [
[ '','Select One' ],
[ 'E','Enrolled (E)' ],
[ 'T','Terminated (T)' ],
[ 'L','LOA (L)' ],
[ 'S','Suspended (S)' ]
]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
editable : false,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
columnWidth : 0.7
},
{
xtype : 'displayfield',
columnWidth : 0.3
},
{
xtype : 'combo',
id : 'PA1200_ADDRESS_LINE_3',
itemId : 'PA1200_ADDRESS_LINE_3',
fieldLabel : '<a href="javascript:showHelp(\'Address 3\');">Address 3</a>',
name : 'addressLine3',
store : new Ext.data.ArrayStore(
{
fields : [ 'value','text' ],
data : [
[ '','Select One' ],
[ 'E','Enrolled (E)' ],
[ 'T','Terminated (T)' ],
[ 'L','LOA (L)' ],
[ 'S','Suspended (S)' ]
]
}),
displayField : 'text',
valueField : 'value',
mode : 'local',
editable : false,
typeAhead : false,
triggerAction : 'all',
lazyRender : true,
columnWidth : 0.7
} ]
});
var clientForm = Ext.create('Ext.form.FormPanel', {
id : 'client',
renderTo : 'example-grid',
bodyPadding : 5,
items : [ profile ]
});
});
最后效果:
公司把我截的图给拦截了，自己运行看看吧。