EXTJSコンポーネント化プログラミングおよび再帰ツリー実装例
39205 ワード
原帖住所:http://www.cnblogs.com/yongfeng/archive/2013/05/27/3100978.html
目次
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
3再帰ツリーの作成
4 EXTJSいくつかの共通コンポーネントを登録する
ux.jsファイル
5 EXTJSクラス図の概要とコード
6 JSONシーケンス化
Newtonsoftを導入する必要があります.Json.dll、JSONシーケンス化を行います.
7運転効果
8まとめ
プロジェクトシステムのディレクトリ・レベル数に制限はありません.再帰ツリーのソリューションを使用できます.
Newtonsoft.Json.dllは、DataTableとList
目次
1大体の考え...1
2データベースの設計...1
3再帰ツリーの作成...2
4 EXTJSはいくつかの共通コンポーネントを登録します...3
5 EXTJSクラス図の概要とコード...7
6 JSONシーケンス化...11
7運転効果...12
8まとめ...13
1大まかな考え方
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