Extjs3综合施用(待续v4.初版)
日期：2014-05-16 浏览次数：20453 次
Extjs3综合应用(待续v4...初版)
最近又要搞界面了。郁闷啊。
Extjs3.1+spring3+ibatis3+struts2,东西太多了。
把自己写的一些例跟大家分享一下。
?
效果图：
?
?
?
?
?
Extjs界面结构
Js代码 
?
<%@ page contentType="text/html; charset=UTF-8" errorPage="../errorpage.jsp"%> <%@include file="../../inc/expiresinc.jsp"%> <html> <head> <title>模板页面</title> <script type="text/javascript"> extjs 代码.显示时要设置infodiv </script> </head> <body><div id="infodiv" style="width:100%;height:100%;"></div></body> </html>
???
导入Extjs 那些代码这不写了。
?一个简单的 Extjs 界面就这样了：
?
?
Java代码
?
<%@ page contentType="text/html; charset=UTF-8" errorPage="../errorpage.jsp"%>
<%@include file="../../inc/expiresinc.jsp"%>
<html>
<head>
<title>模板页面</title>
<script type="text/javascript">
var panel_permissiondiv = new Ext.Panel({
renderTo : 'infodiv',
width : Ext.get("infodiv").getWidth(),
height : Ext.get("infodiv").getHeight(),
border : false,
layout : 'border',
tbar : ['->', {
text : 'TEXT',
iconCls : 'icon-add',
xtype : 'easyButton',
tooltip : 'TEXT'
}, '-', {
text : 'TEXT',
iconCls : 'icon-add',
xtype : 'easyButton',
tooltip : 'TEXT'
}],
items : [from_permission, grid_permission]
});
</script>
</head>
<body><div id="permissiondiv" style="width:100%;height:100%;"></div></body>
</html>
?上面的“items : [from_permission, grid_permission]”，是界面加载的另的无素。稍后会写到。
?
?再给个完整一点的页面吧:
?
?
<%@ page contentType="text/html; charset=UTF-8" errorPage="../errorpage.jsp"%>
<%@include file="../../inc/expiresinc.jsp"%>
<html>
<head>
<title>模板页面</title>
<script type="text/javascript">
var storeLoadMask = new Ext.LoadMask(Ext.getBody(), {
msg : "正在加载数据，请等待..."
});
storeLoadMask.show();
var panel = Ext.getCmp('center-tab-panel');
var from_subscriberpk = new Ext.FormPanel({
labelAlign : 'left',
labelWidth : 140,
frame : true,
title : '查询',
region : 'north',
collapseMode : 'mini',
split : true,
height : 140,
minSize : 120,
maxSize : 200,
split : true,
collapsible : true,
margins : '5 5 0 5',
items : [{
layout : 'column',
items : [{
columnWidth : .4,
layout : 'form',
defaults : {
anchor : '93%'
},
items : [{
xtype : 'textfield',
fieldLabel : 'TEXT',
name : ''
}]
}, {
columnWidth : .4,
layout : 'form',
defaults : {
anchor : '93%'
},
items : [{
xtype : 'textfield',
fieldLabel : 'TEXT',
name : ''
}]
}]
}, {
layout : 'column',
items : [{
columnWidth : .4,
layout : 'form',
defaults : {
anchor : '93%'
},
items : [{
xtype : 'datefield',
fieldLabel : 'TEXT',
name : ''
}]
}, {
columnWidth :
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
