jsp页面代码:
<script type="text/javas
//生成标签页tab 我的index.jsp使用了viewport视图布局 此tab 要加载center中
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});
Ext.on
var Tree = Ext.tree;
//定义根节点的Loader
var treeloader=new Tree.TreeLoader({dataUrl:'tree.jsp?DID=1'});
//异步加载根节点
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:'规划系统' ,
leaf:false //若为true 则树节点的图标将改变,显示默认的图片
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
//el:'tree_div', //填充区域
rootVisible:true, //隐藏根节点
useArrows:false, //文件夹前显示的图标改变了不在是+号了
border:true, //边框
animate:true, //动画效果
autoScroll:true, //自动滚动
enableDD:false, //拖拽节点
containerScroll:true,
loader:treeloader
});
//设置根节点
treepanel.setRootNode(rootnode);
//响应事件,传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点
treepanel.on('beforeload',
function(node,event){
//alert(node.id);
treepanel.loader.dataUrl='tree.jsp?DID='+node.id; //定义子节点的Loader
}
);
//点击节点时的click事件,当点击子节点时,就会动态的打开一个tabpanel 这里使用了iframe
treepanel.on('click',
function(node,event){
var n = tab.getComponent(node.id);
if (node.isLeaf()){
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
html : '<iframe name="main'+node.id+'" scrolling="auto" frameborder="0" width="100%" height="100%" src="+node.url+"></iframe>'+node.text
});
}
tab.setActiveTab(n);
}
}
);
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),
{
region:'west',
el:'west',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系统菜单',
collapsible :false, //右上角收缩按钮
layoutConfig:{
animate:true
},
items: [
{
title:'EXT控件使用',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
}]
},
tab //初始标签页
]
});
//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
treepanel.render('tree-div');
rootnode.expand(false,false);
});
</script>
-----------------------------------------------------------------------------------------------------------
tree.jsp代码,此页面接收index.jsp的请求
<%@ page language="java" pageEncoding="UTF-8"%>
<jsp:useBean class="com.nbw.pub.JSONTree" id="JSONTree"></jsp:useBean>
<%
String uplevel = "";
if (request.getParameter("DID") != null) {
uplevel = request.getParameter("DID").toString();
}
JSONTree.setUplevel(uplevel);
%>
<%=JSONTree.getJSONString()%>
数据库表结构:
create table SYS_MODULE (
ID NUMBER(12) primary key, 、//ID主键
NAME VARCHAR2(50), //节点名称
UPLEVEL VARCHAR2(5), //父节点ID
SERIALNO NUMBER(2), //子节点排序号
MEN1 VARCHAR2(40),
MEN2 VARCHAR2(40),
TITLEPIC VARCHAR2(40), //图片
URL VARCHAR2(200), //URL 只有子节点才有URL
LEAF NUMBER(1), //是否是叶子节点
);
JsonTreeModule.java代码
package com.nbw.sysadmin.domain;
public class JsonTreeModule {
/*
* 此bean用于构建树向其中注入有关的信息,将SysModule中的信息拷贝到JsonTreeModule中
*/
private String id; //ID
private String text; //节点显示
private String cls; //图标
private boolean leaf; //是否叶子
private String href; //链接
private String hrefTarget; //链接指向
private boolean expandable; //是否展开
private String description; //描述信息
public JsonTreeModule() {
super();
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public boolean isExpandable() {
return expandable;
}
public void setExpandable(boolean expandable) {
this.expandable = expandable;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
JSONTree.java代码 最核心的
package com.nbw.pub;
imp
imp
imp
imp
imp
imp
imp
imp
imp
imp
public class JSONTree extends HibernateDaoSupport {
//通过set方法注入父节点值
private String uplevel;
/*
* 返回构建tree的JSON格式的字符串
*/
public String getJSONString() {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
ArrayList<JsonTreeModule> TreeNodeArray = null;
String SQLString = "select * from sys_module s where s.uplevel='" + this.uplevel+"' order by s.uplevel";
try {
conn = HibernateSessionFactory.getSession().connection();
st = conn.createStatement();
rs = st.executeQuery(SQLString);
TreeNodeArray = new ArrayList<JsonTreeModule>();
while (rs.next()) {
JsonTreeModule TreeNode = new JsonTreeModule();
TreeNode.setId(rs.getString("moduleid"));
TreeNode.setText(rs.getString("modulename"));
TreeNode.setDescription(rs.getString("modulename"));
TreeNode.setHref(rs.getString("url"));
TreeNode.setHrefTarget("main"+rs.getString("moduleid"));
//父节点
if (Integer.parseInt(rs.getString("isleaf"))== 0)
{
TreeNode.setCls("folder");
TreeNode.setLeaf(false);
TreeNode.setExpandable(true);
} else // 子节点
{
TreeNode.setCls("file");
TreeNode.setLeaf(true);
TreeNode.setExpandable(false);
}
TreeNodeArray.add(TreeNode);
}
// 得到JSON数组
JSONArray JsonArray = JSONArray.fromObject(TreeNodeArray);
// 返回JSON字符串
return JsonArray.toString();
} catch (Exception e) {
System.out.println("getJSONString() of JSONTree.java throws : "+ e.toString());
return "";
} finally {
try {
HibernateSessionFactory.getSession().connection().close();
} catch (HibernateException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public String getUplevel() {
return uplevel;
}
public void setUplevel(String uplevel) {
this.uplevel = uplevel;
}
}
首先引入JS:RowExpander.js 这个文件可以在ext提供的example/grid找到
Ext.on
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.da
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);
var expander = new xg.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});
var grid1 = new xg.GridPanel({
store: new Ext.da
reader: reader,
da
}),
cm: new xg.ColumnModel([
expander,
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
});
example/grid/grid3.html看到效果
2009-04-20
var store=null;
Ext.on
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//创建json存储器
store=new Ext.da
id:'store',
url:'userInfoCptAction.act
root: 'rows',
autoLoad: true,
fields:[
{name:'userId'},
{name:'username'},
{name:'password'},
{name:'age'},
{name:'mobile'},
{name:'address'}
]
});
store.load(); //加载数据
// 创建表格
var grid = new Ext.grid.GridPanel({
store: store,
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
cm: new Ext.grid.ColumnModel([
{id:'userId',header: '用户ID', width: 85, sortable: true, dataIndex: 'userId'},
{header: '用户昵称', width: 95, sortable: true, dataIndex: 'username'},
{header: '密码', width: 85, sortable: true, dataIndex: 'password'},
{header: '年龄', width: 85, sortable: true, dataIndex: 'age'},
{header: '手机号', width: 85, sortable: true, dataIndex: 'mobile'},
{header: '地址', width: 85, sortable: true, dataIndex: 'address'}
]),
stripeRows: true,
autoExpandColumn: 'userId',
height:350,
width:600,
title:'数据显示',
bbar:[{
text:'添加',
tooltip:'新添一个用户',
listeners :{'click':function(){
var win=Ext.getCmp('win');
win.show();
}
}
}, '-', {
text:'修改',
tooltip:'修改用户信息',
listeners :{'click':function(){
if(grid.getSelectionModel().hasSelection()){
var records =grid.selModel.getSelections();//得到被选择的行的数组
var recordsLen = records.length;//得到行数组的长度
if( recordsLen>1){
Ext.Msg.alert("系统提示信息","请选择其中一项进行编辑!");}//一次只给编辑一行
else{
var record=grid.getSelectionModel().getSelected();//获取选择的记录集
var userId=record.get("userId");
var win=Ext.getCmp('win');
win.show();
//查询该用户数据
UserInfoCptDwr.selectByUserId(userId,function(msg){
DWRUtil.setValues(msg);
win.getComponent('form').getComponent('userId').setDisabled(true);
});
}
}else{
Ext.Msg.alert("提示","请先选择要编辑的行!");
}
}
}
},'-',{
text:'删除',
tooltip:'删除一个或多个用户',
listeners :{'click':function(){
if(grid.getSelectionModel().hasSelection()){
var records =grid.selModel.getSelections();//得到被选择的行的数组
var recordsLen = records.length;//得到行数组的长度
var myUserId=Ext.get("myUserId").getValue();
for(var i=0;i<recordsLen;i++){
if(records[i].get("userId")===myUserId){
Ext.Msg.alert("提示","你不能删除自己!");
return;
}
}
for(var i=0;i<recordsLen;i++){
//删除该用户
UserInfoCptDwr.deleteUserByUserId(records[i].get("userId"),function(){
store.reload();
});
}
}else{
Ext.Msg.alert("提示","请先选择要删除的行!");
}
}}
}]
});
grid.render('grid-example');
});
Ext.on
Ext.QuickTips.init(); //初始化提示信息
Ext.form.Field.prototype.msgTarget = 'side'; //提示信息显示位子
//创建表单
var simple = new Ext.FormPanel({
id:'form',
labelWidth: 75,
width:300,
defaults: {width: 150},
defaultType: 'textfield',//默认字段类型
//定义表单元素
items: [{
fieldLabel: '用户ID',
id:'userId',
name: 'userId',//元素名
allowBlank:false, //不允许为空
listeners :{'blur':function(){
var userId=$("userId").value;
//判断是否存在该用户ID
UserInfoCptDwr.ifExistTheUserId(userId,function(msg){
if(msg===false){
Ext.getCmp('userId').markInvalid("此用户ID已经被占用!");
}
});
}
}
},{
inputType:'password',
fieldLabel: '密码',
name: 'password',
allowBlank:false
},{
fieldLabel: '用户昵称',
id:'username',
name: 'username',//元素名
allowBlank:false , //不允许为空
listeners:{'blur':function(){
var username=$("username").value;
//判断该用户昵称是否存在
UserInfoCptDwr.ifExistTheUserName(username,function(msg){
if(msg===false){
Ext.getCmp('username').markInvalid("此昵称已经被占用!");
}
});
}
}
},{
fieldLabel: '用户年龄',
name: 'age',
regex :new RegExp('^[0-9]+$'),
regexText :'你输入的年龄不正确'
},{
fieldLabel: '手机号',
name: 'mobile',
regex :new RegExp('^[0-9]{11}$'),
regexText :'你输入的手机号不正确'
},{
fieldLabel: '地址',
name: 'address'
}
],
buttons: [{
text: '执行',
type: 'submit',
handler:function(){
if(simple.form.isValid()){
var cpt={userId:null,username:null,password:null,age:null,mobile:null,address:null};
DWRUtil.getValues(cpt);
//保存或更新表单
UserInfoCptDwr.saveOrUpdate(cpt,function(msg){
if(msg===true){
Ext.Msg.alert("系统提示!","执行成功!");
simple.form.reset();
store.reload();
}else{
Ext.Msg.alert("警告!","无法执行该操作!");
}
});
}
}
},{
text: '重置',
handler:function(){
simple.form.reset(); //重置表单
}
}]
});
//创建窗口
new Ext.Window({
id:"win",
x:500,
closeAction:'hide',
plain: true,
height:220,
width :320,
autoScroll :true,
draggable :true,
items:Ext.getCmp('form'),
listeners:{'hide':function(){
Ext.getCmp('form').form.reset();
Ext.getCmp('form').getComponent('userId').enable();
}
}
});
});
遇到一个问题,是就grid的表头不能显示,而我的代码写了
{id:'userId',header: '用户ID', width: 85, sortable: true, dataIndex: 'userId'},
{header: '用户昵称', width: 95, sortable: true, dataIndex: 'username'},
{header: '密码', width: 85, sortable: true, dataIndex: 'password'},
{header: '年龄', width: 85, sortable: true, dataIndex: 'age'},
{header: '手机号', width: 85, sortable: true, dataIndex: 'mobile'},
{header: '地址', width: 85, sortable: true, dataIndex: 'address'}
明明写了header了,挂在div上的时候却显示不出来
后发现挂grid的div是这么写
<center>
<div id="grid">
</div>
</center>
去掉居中<center></center>就可以正常显示表头了
不知道为什么会这样。
最后只好改成这样了
<div id="grid-example" style="padding-left:350px; margin-left:50px;">
var e = Ext.get('testRefresh'); //取得id属性值'testRefresh'的span元素引用
var mgr = e.getUpdater(); //创建该span元素的UpdateManager实例
mgr.disableCaching = true; //关闭内容cache,否则会取cache中的内容,而不会刷新
mgr.showLoadIndicator = false;
mgr.on('beforeupdate',function(el){
e.fadeOut(); //淡出
});
mgr.on('update',function(el, response ){
e.fadeIn(); //淡入
var doc = response.responseText; //得到act
Ext.get( "testRefresh" ).dom.innerHTML = doc; //更新span元素的内容(加粗、斜体)
});
mgr.startAutoRefresh(
2, //每隔2秒刷新一次
"http://127.0.0.1:8088/presence/testRefresh.php", //一个struts act
null,
true
);
09年新晋3D主流网游《天下贰》,网易六年亿资打造