EXTJS组件化编程及递归树实现范例

目录

1 大概思路... 1

2 设计数据库... 1

3 编写递归树... 2

4 EXTJS注册若干通用组件... 3

5 EXTJS类图概览与代码... 7

6 JSON序列化... 11

7 运行效果... 12

8 总结... 13

1 大概思路

设计数据库

编写递归树

EXTJS注册若干通用组件与代码

EXTJS类图概览

JSON序列化

运行效果

2 设计数据库

详细查看db_script

/*==============================================================*/
/* Table: SYSTEM_MODULE                                         */
/*==============================================================*/
create table SYSTEM_MODULE
(
SM_ID                NUMBER               not null,
SM_PARENTID          NUMBER,
SM_NAME              VARCHAR(30),
SM_DESCRIPTION       VARCHAR(50),
SM_REMARK            VARCHAR(300),
SM_EXPANDED            VARCHAR(1)           default '0' not null,
SM_LEAF              VARCHAR(1)           default '0',
UPDATE_DATE          DATE,
UPDATE_BY            VARCHAR(30),
CREATE_DATE          DATE,
CREATE_BY            VARCHAR(30),
constraint PK_SYSTEM_MODULE primary key (SM_ID)
);
comment on table SYSTEM_MODULE is
'模块表';
comment on column SYSTEM_MODULE.SM_ID is
'当前节点';
comment on column SYSTEM_MODULE.SM_PARENTID is
'父节点';
comment on column SYSTEM_MODULE.SM_NAME is
'模块名称';
comment on column SYSTEM_MODULE.SM_DESCRIPTION is
'描述或访问页面、对象';
comment on column SYSTEM_MODULE.SM_REMARK is
'备注';
comment on column SYSTEM_MODULE.SM_EXPANDED is
'0不展开,1展开';
comment on column SYSTEM_MODULE.SM_LEAF is
'0 不是子节点 ,1 是子节点';
comment on column SYSTEM_MODULE.UPDATE_DATE is
'更新时间';
comment on column SYSTEM_MODULE.UPDATE_BY is
'更新人';
comment on column SYSTEM_MODULE.CREATE_DATE is
'创建时间';
comment on column SYSTEM_MODULE.CREATE_BY is
'创建人';
create sequence SEQ_SYSTEM_MODULE
increment by 1
start with 1
nomaxvalue
nocycle;
/* 若有数据 */
INSERT INTO system_module(sm_id,SM_PARENTID,sm_name,SM_EXPANDED) VALUES(seq_system_module.nextval,'0','产品一','1');

3 编写递归树

/// <summary>
/// 获取树
/// </summary>
/// <param name="obj"></param>
/// <returns></returns>
public SYSTEM_TREE GetTree(SYSTEM_TREE obj)
{
try
{
// 查询子节点
string strNextSQL = @"SELECT SM.SM_ID as id, SM.SM_PARENTID as parentid, SM.SM_NAME as text, SM.SM_EXPANDED as expanded
FROM SYSTEM_MODULE SM
WHERE SM.SM_PARENTID = :P_SM_PARENTID
ORDER BY SM.SM_ID";
OracleParameter[] parasNext = new OracleParameter[1];
parasNext[0] = new OracleParameter("P_SM_PARENTID", OracleType.Number);
parasNext[0].Value = obj.id;
DataView dvNext = OracleHelper.ExecuteView(this.connectString, System.Data.CommandType.Text, strNextSQL, parasNext);
DataTable dtNext = dvNext.Table;

obj.children = new List<SYSTEM_TREE>();
// 子节点添加到当前节点
foreach (DataRow dr in dtNext.Rows)
{
SYSTEM_TREE st = new SYSTEM_TREE();
st.id = Convert.ToInt32(dr["id"].ToString());
st.text = dr["text"].ToString();
st.expanded = dr["expanded"].ToString() == "0" ? false : true;

// 递归调用
st = this.GetTree(st);

st.leaf = st.children.Count > 0 ? false : true;
obj.children.Add(st);
}
return obj;
}
catch
{
throw;
}
}

4 EXTJS注册若干通用组件

ux.js文件

Ext.ns('Pub.ux');

/*
create by zhyongfeng in 2013.05.23
注册RadioGroup扩展组件
new Pub.ux.RadioGroup({
......
})
*/
Pub.ux.RadioGroup = Ext.extend(Ext.form.RadioGroup, {
getValue : function () {
var v;
if (this.rendered) {
this.items.each(function (item) {
if (!item.getValue())
return true;
v = item.getRawValue();
return false;
});
} else {
for (var k in this.items) {
if (this.items[k].checked) {
v = this.items[k].inputValue;
break;
}
}
}
return v;
},
setValue : function (v) {
if (this.rendered)
this.items.each(function (item) {
item.setValue(item.getRawValue() == v);
});
else {
for (var k in this.items) {
this.items[k].checked = this.items[k].inputValue == v;
}
}
}
});
Ext.reg('ux.RadioGroup', Pub.ux.RadioGroup);

/*
create by zhyongfeng in 2013.05.23
注册FormPanel扩展组件
new Pub.ux.FormPanel({
......
})
*/
Pub.ux.FormPanel = Ext.extend(Ext.FormPanel, {
frame : true,
layout : 'form',
border : false,
lableWidth : 20,
constructor : function (config) {
// 对象不存在,则返回
if (!config) {
Pub.ux.FormPanel.superclass.constructor.apply(this);
return;
}

Ext.apply(this, config);
Pub.ux.FormPanel.superclass.constructor.apply(this);
}
});
Ext.reg('ux.FormPanel',Pub.ux.FormPanel);

/*
create by zhyongfeng in 2013.05.23
注册Window扩展组件
new Pub.ux.Window({
......
})
*/
Pub.ux.Window = Ext.extend(Ext.Window, {
frame : true,
border : false,
autoDestroy : true,
modal:true,
resizable : false,
layout:'fit',
buttonAlign : "center",
width : 250,
height : 150,
constructor : function (config) {
// 对象不存在,则返回
if (!config) {
Pub.ux.Window.superclass.constructor.apply(this);
return;
}
this.buttons = [{
text : "提交",
scope : this,
handler : this.onSave
}, {
text : "退出",
scope : this,
handler : this.close
}
];
Ext.apply(this, config);
Pub.ux.Window.superclass.constructor.apply(this);
},
onSave : function () {
if (this.items.length == 0)
return;
// 针对表单
var formPanel = this.getFormPanel();
if (formPanel.getForm().isValid())
formPanel.getForm().submit({
url:formPanel.url,
waitMsg : '正在保存...',
success : function (re, v) {},
failure : function () {
JsHelper.ShowError("响应文本错误");
}
});
},
getFormPanel:function(){
if (this.items.length == 0)
return;
return this.items.items[0];
}
})
Ext.reg('ux.Window',Pub.ux.Window);

5 EXTJS类图概览与代码

Ext.ns('demo');
Ext.onReady(function () {
Ext.QuickTips.init();
demo.run();
});

demo.formItems = [{
xtype : 'textfield',
fieldLabel : 'ID',
name : 'id',
anchor : '100%',
readOnly : true,
style : {
background : '#E6E6E6'
}
}, {
xtype : 'textfield',
fieldLabel : '名称',
name : 'parentid',
anchor : '100%',
allowBlank : false
}, {
xtype : 'ux.RadioGroup',
fieldLabel : '展开',
name : 'expandedgroup',
items : [{
xtype : 'radio',
name : "expanded",
inputValue : true,
boxLabel : "是",
checked : true

}, {
xtype : 'radio',
name : "expanded",
inputValue : false,
boxLabel : "否"

}
]
}
];

/*
声明menu
new demo.menuClick({
treePanel : null,
......
})
*/
demo.menuClick = Ext.extend(Ext.menu.Menu, {
constructor : function (config) {
this.items = [{
text : '添加节点',
scope : this,
handler : this.onNew
}, {
text : '编辑节点',
scope : this,
handler : this.onEdit
}, {
text : '删除节点',
scope : this,
handler : this.onDel
}
];
// 对象不存在,则返回
if (!config) {
demo.menuClick.superclass.constructor.apply(this);
return;
}
Ext.apply(this, config);
demo.menuClick.superclass.constructor.apply(this);
},
onNew : function () {
var formPanel = new Pub.ux.FormPanel({
url:'Handler.ashx',
items:demo.formItems
});
var window = new Pub.ux.Window({
height:300,
width:300,
title : '新增',
items : [formPanel]
});
window.show();
},
onEdit : function () {
var selectNode = this.treePanel.getSelectionModel().getSelectedNode();
if (selectNode.id == 0) {
JsHelper.ShowWarning("根节点不提供编辑");
return;
}

var formPanel = new Pub.ux.FormPanel({
url:'Handler.ashx',
items:demo.formItems
});
var window = new Pub.ux.Window({
title : '编辑',
items : [formPanel]
});
// 加载数据
var json = {
"id" : selectNode.id,
"parentid" : selectNode.text,
"expandedgroup" : selectNode.expanded
};
formPanel.getForm().setValues(json);
window.show();
},
onDel : function () {
var selectNode = this.treePanel.getSelectionModel().getSelectedNode();
if (selectNode.id == 0) {
JsHelper.ShowWarning("根节点不提供删除");
return;
}
JsHelper.OK("当前节点为" + selectNode.id + "<br />当前文本为" + selectNode.text);
}
});

demo.treePanel = Ext.extend(Ext.tree.TreePanel, {
constructor : function (config) {
// 默认加载
Ext.apply(this, {
enableDD : false,
allowDrag : false,
useArrows : false,
lines : true,
border : false,
rootVisible : true,
root : new Ext.tree.AsyncTreeNode({
id : "0",
text : "超市商场",
expanded : true, //展开
loader : new Ext.tree.TreeLoader({
url : "handler.ashx"
})
})
});
Ext.apply(this, config);
demo.treePanel.superclass.constructor.apply(this);
}
});

demo.run = function () {
var treePanel = new demo.treePanel();
var rightClick = new demo.menuClick({
treePanel : treePanel
});

// 右键监听
treePanel.on('contextmenu', function (node, event) {
// 阻止浏览器默认右键菜单显示
event.preventDefault();
node.select();
// 取得鼠标点击坐标,展示菜单
rightClick.showAt(event.getXY());
});

var panelMain = new Ext.Panel({
title : "系统管理",
width : 300,
height : 450,
autoScroll : true,
layout : 'fit',
iconCls : "form-window",
items : treePanel,
collapsible : false
});

panelMain.render(document.body);
}

6 JSON序列化

需要引入Newtonsoft.Json.dll，进行JSON序列化。

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

SYSTEMMANAGER sysmanager = new SYSTEMMANAGER();
SYSTEM_TREE obj = new SYSTEM_TREE();
obj.id = int.Parse(context.Request["node"]);
obj = sysmanager.GetTree(obj);
string json = JsonConvert.SerializeObject(obj.children, Formatting.None,
new Newtonsoft.Json.Converters.IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" });

7 运行效果

8 总结

对于项目系统目录级数不限，可采用递归树的解决方案。

Newtonsoft.Json.dll可对DataTable与List<Object>等泛型进行序列化。

源代码下载：

http://files.cnblogs.com/yongfeng/EXTJS_TREE.rar

PDF下载：

http://files.cnblogs.com/yongfeng/EXTJS_TREE.pdf