由于项目需要做一个动态的extjs树、列等等，简而言之，就是一个都是动态的加载功能，
自己琢磨了半天，查各种资料，弄了将近两个星期，终于做出来了
首先，想看表结构，我的这个功能需要主从两张表来支持
代码目录表：
CREATE TABLE SYS_T01_CODECONTENT
(
ID NUMBER NOT NULL,
PID NUMBER NOT NULL,
TABLENAME VARCHAR2(50 BYTE),
ZH_CN VARCHAR2(200 BYTE),
ENABLE CHAR(1 BYTE)
);
代码结构表：
CREATE TABLE FTGM.SYS_T01_CODESTRUCT
(
ID NUMBER,
TABLENAME VARCHAR2(20 BYTE),
COLUMNS VARCHAR2(20 BYTE),
ZH_CN VARCHAR2(20 BYTE),
ENABLE CHAR(1 BYTE),
PRECISION NUMBER,
TYPE VARCHAR2(20 BYTE)
);
然后是程序部分了，
最开始先加载一个树
<script>
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = ‘Scripts/ExtJS/resources/images/default/s.gif‘;
Ext.QuickTips.init();
//异步加载根节点
var root = new Ext.tree.AsyncTreeNode({
text: ‘所有表‘,
draggable: false,
id: ‘0‘
});
//加载数据
var treeloader = new Ext.tree.TreeLoader({
dataUrl: ‘CodeManager.aspx?opt=GetTree‘
});
//树
var tree = new Ext.tree.TreePanel({
rootVisible: true,
layout: ‘fit‘,
width: document.documentElement.clientWidth * 0.2,
height: document.documentElement.clientHeight,
autoScroll: true,
renderTo: ‘tree‘,
animate: true,
enableDD: false,
title: ‘代码目录表‘,
root: root,
loader: treeloader
});
//双击事件
tree.on("dblclick", function (node) {
//节点ID
node = node.id;
//全局变量
var data;
//grid中取出的字段对象
var field = Array();
//form表单item
var items = ‘‘;
var value = ‘‘;
var params = ‘‘;
var rowVal = ‘‘;
//添加动态列 这里才是加载动态grid的关键
var addColumn = function () {
this.fields = ‘‘; //列文件解析对象
this.columns = ‘‘; //列文件列头对象
this.addColumns = function (name, caption) { //私有函数
if (this.fields.length > 0) {
this.fields += ‘,‘;
}
if (this.columns.length > 0) {
this.columns += ‘,‘;
}
this.fields += ‘{name:"‘ + name + ‘"}‘;
this.columns += ‘{header:"‘ + caption + ‘",dataIndex:"‘ + name + ‘",width:100,sortable:true}‘;
};
};var createGrid = function () {
//赋值给列
var cm = new Ext.grid.ColumnModel(eval(‘([‘ + data.columns + ‘])‘));
//默认排序
cm.defaultSortable = true;
//数据字段
var fields = eval(‘([‘ + data.fields + ‘])‘);
//加载数据源
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: ‘GET‘,
url: "CodeManager.aspx?opt=GetData&&node=" + node + ""
}),
reader: new Ext.data.JsonReader({
totalProperty: "total",
root: "rows",
fields: fields,
successProperty: ‘success‘
})
});
//重新加载数据
store.load({ params: { start: 1, limit: 20} });
//分页工具栏
var pagingBar = new Ext.PagingToolbar({
displayInfo: true,
emptyMsg: "没有数据显示",
displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据",
store: store,
pageSize: 20
});});
</script>
在树的代码部分加载grid
var grid = new Ext.grid.GridPanel({
title: "代码结构表",
cm: cm,
id: "content_panel",
renderTo: "content",
frame: true,
border: true,
layout: "fit",
width: document.documentElement.clientWidth * 0.8,
height: document.documentElement.clientHeight,
store: store,
pageSize: 20,
viewConfig: {
forceFit: true
},
bbar: pagingBar,
tbar: [
{
text: ‘新增‘,
id: ‘btn_add‘,
iconCls: ‘newIcon‘,
handler: function Add() {
$("#win_new").html("");
items = "";
for (var i = 0; i < grid.colModel.config.length; i++) {
field = grid.colModel.config[i];
items += "{fieldLabel: ‘" + field.header + "‘,name: ‘" + field.dataIndex + "‘,id: ‘" + field.dataIndex + "‘,width: 180},";
}
//截取以逗号结尾之前的部分
items = "[" + items.substring(0, items.lastIndexOf(‘,‘)) + "]";
//将字符串转换成JSON对象
items = eval(items);
//新增表单
var form = new Ext.form.FormPanel({ //创建表单面板
labelAlign: ‘center‘, //水平对齐方式
layout: ‘form‘, //布局模式
id: ‘form_xg‘, //设置ID
labelWidth: 100, //宽度
frame: true, //是否显示frame
defaultType: ‘textfield‘, //默认文本类型
defaults: { allowBlank: false }, //默认是否允许为空
autoHeight: true, //自适应高度
autoWidth: true, //自适应宽度
bodyStyle: ‘padding:0 0 10px 30px;‘, //设置窗体样式
items: items
});
//新增窗体
var win_new = new Ext.Window({
el: ‘win_new‘,
layout: ‘form‘,
resizable: false,
title: ‘<center>新增代码结构</center>‘,
constrain: true,
constrainHeader: true,
animateTarget: ‘target‘,
modal: false,
autoScroll: true,
autowidth: true,
autoHeight: true,
closeAction: ‘hide‘,
defaultType: ‘textfield‘,
items: [form],
buttonAlign: ‘center‘,
defaultButton: ‘0‘,
buttons: [
{
text: ‘确定‘,
align: ‘center‘,
handler: function () {
//遍历新增表单
value = "";
form.items.each(function (item, index, length) {
value += item.initialConfig.name + ":";
value += "‘" + Ext.getCmp(item.initialConfig.id).getValue() + "‘,";
});
value = "{" + value.substring(0, value.lastIndexOf(‘,‘)) + "}";
Ext.Ajax.request({
url: "CodeManager.aspx?opt=New&&node=" + node + "&&codeStruct=" + value + "",
method: "POST",
async: false,
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "添加成功！");
win_new.hide();
grid.store.reload();
}
else {
Ext.Msg.alert("提示信息", "添加失败！");
}
},
failure: function () {
win_new.hide();
Ext.Msg.alert("提示信息", "惟一字段数据重复或数据为空！");
}
});
}
}
, {
text: ‘取消‘,
align: ‘center‘,
tooltip: ‘退出并关闭当前窗口‘,
handler: function () {
win_new.hide();
}
}
]
});
win_new.show();
}
},
{
text: ‘修改‘,
id: ‘btn_sub‘,
iconCls: ‘modIcon‘,
handler: function Modify() {
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) {
Ext.Msg.alert("提示信息", ‘请至少选择一条记录‘);
return;
}
$("#win_update").html("");
items = "";
for (var i = 0; i < grid.colModel.config.length; i++) {
field = grid.colModel.config[i];
items += "{fieldLabel: ‘" + field.header + "‘,name: ‘" + field.dataIndex + "_update‘,id: ‘" + field.dataIndex + "_update‘,width: 180},";
}
//截取以逗号结尾之前的部分
items = "[" + items.substring(0, items.lastIndexOf(‘,‘)) + "]";
//将字符串转换成JSON对象
items = eval(items);
//修改表单
var form = new Ext.form.FormPanel({ //创建表单面板
labelAlign: ‘center‘, //水平对齐方式
layout: ‘form‘, //布局模式
id: ‘form_modify‘, //设置ID
labelWidth: 100, //宽度
frame: true, //是否显示frame
defaultType: ‘textfield‘, //默认文本类型
defaults: { allowBlank: false }, //默认是否允许为空
autoHeight: true, //自适应高度
autoWidth: true, //自适应宽度
bodyStyle: ‘padding:0 0 10px 30px;‘, //设置窗体样式
items: items
});
//表单循环
form.items.each(function (item) {
var rec = rows[0].json;
//数据结构循环
for (var key in rec) {
if (item.id == (key + "_update")) {
Ext.getCmp(key + "_update").setValue(rec[key]);
};
}
});
//修改窗体
var win_update = new Ext.Window({
el: ‘win_update‘,
layout: ‘form‘,
resizable: false,
title: ‘<center>修改结构表信息</center>‘,
constrain: true,
constrainHeader: true,
animateTarget: ‘target‘,
modal: false,
autoScroll: true,
autowidth: true,
autoHeight: true,
closeAction: ‘hide‘,
defaultType: ‘textfield‘,
items: [form],
buttonAlign: ‘center‘,
defaultButton: ‘0‘,
buttons: [
{
text: ‘确定‘,
align: ‘center‘,
handler: function () {
//遍历修改表单,获取表单的值
value = "";
form.items.each(function (item) {
value += item.initialConfig.name + ":";
value += "‘" + Ext.getCmp(item.initialConfig.id).getValue() + "‘,";
});
value = "{" + escape(value.substring(0, value.lastIndexOf(‘,‘)))
+ "}";
rowVal = ‘‘;
var name = rows[0].json;
for (var key in name) {
rowVal += key + ":" + name[key] + ",";
}
rowVal = "{" + escape(rowVal.substring(0, rowVal.lastIndexOf(‘,‘))) + "}";
Ext.Ajax.request({
url: "CodeManager.aspx?opt=Modify&&node=" + node + "&&codeStruct=" + value + "&&rowVal=" + rowVal + "",
method: "POST",
async: false,
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "修改成功！");
win_update.hide();
grid.store.reload();
}
else {
win_update.hide();
Ext.Msg.alert("提示信息", "修改失败！");
}
},
failure: function () {
win_update.hide();
Ext.Msg.alert("提示信息", "修改的数据不符合规范！");
}
});
}
}
, {
text: ‘取消‘,
align: ‘center‘,
tooltip: ‘退出并关闭当前窗口‘,
handler: function () {
win_update.hide();
}
}
]
});
win_update.show();
}
},
{
text: ‘删除‘,
id: ‘btn_del‘,
iconCls: ‘delIcon‘,
handler: function Delete() {
//获取行对象
var rows = grid.getSelectionModel().getSelections();
if (rows.length == 0) {
Ext.Msg.alert("提示信息", ‘请至少选择一条记录‘);
return;
}
//遍历选中行
rowVal = ‘‘;
var name = rows[0].json;
for (var key in name) {
rowVal += key + ":" + name[key] + ",";
}
rowVal = "{" + rowVal.substring(0, rowVal.lastIndexOf(‘,‘)) + "}";
Ext.Msg.confirm(‘请确认‘, ‘您确定要删除这些信息吗?‘,function (button, text) {
if (button == "yes") {
Ext.Ajax.request({
url: "CodeManager.aspx?opt=Del&&node=" + node + "&&rowVal=" + rowVal + "",
method: "POST",
async: false,
buttons: { yes: ‘确定‘, no: ‘取消‘ },
success: function (response) {
if (response.responseText != 0) {
Ext.Msg.alert("提示信息", "删除成功！");
grid.store.reload();
}
else {
Ext.Msg.alert("提示信息", "删除失败！");
}
}
});
}
});
}
}
]
});
};
//请求列、节点，返回列和数据
var params = { "node": node, "opt": "GetColumn" };
Ext.Ajax.request({ //回传请求
url: "CodeManager.aspx", //回传地址
params: params, //回传参数
success: function (response, option) {
if (response.responseText == "") {
return;
}
data = new addColumn();
//JSON格式化返回结果（字符串类型）转换成JSON对象
var res = Ext.util.JSON.decode(response.responseText);
//循环JSON对象,取出特定列
for (var i = 0; i < res.length; i++) {
var rec = res[i];
data.addColumns(rec.COLUMNS, rec.ZH_CN);
}
//清除代码表
$("#content").html(‘‘);
$("#win_new").html(‘‘);
createGrid();
},
failure: function () {
Ext.Msg.alert("消息", "查询出错，请打开数据库查看数据表名是否正确?", "谢谢");
}
});
});
extjs动态树 动态grid 动态列,布布扣,bubuko.com