刚学习extjs技术,把自己的小心得分享下。。。
- .net后台代码
[WebMethod]
public string getTree(){
string msg = "";
try
{
string sql = "select * from Area";
DataTable dt = SqlHelper.ExecuteDataTable(sql);
msg = JsonConvert.SerializeObject(dt);
}
catch (Exception ex)
{
msg = ex.Message;
}
return msg;
}
2. 前端js代码
function DataAccess(methodName, paramObj, callback) {
Ext.Ajax.request({
url: "../DataService.asmx/" + methodName,
params: JSON.stringify(paramObj),
dataType: 'json',
success: function (response) {
try {
// var respText = Ext.JSON.decode(resp.responseText);
var xmlDoc = response.responseXML;
if (xmlDoc != null) {
var ais = xmlDoc.getElementsByTagName("string");
var data = ais[0].childNodes[0];
callback(data);
}
} catch (ex) {
alert(ex);
}
}
});
};
Ext.Ajax.request({
url: "../DataService.asmx/" + methodName,
params: JSON.stringify(paramObj),
dataType: 'json',
success: function (response) {
try {
// var respText = Ext.JSON.decode(resp.responseText);
var xmlDoc = response.responseXML;
if (xmlDoc != null) {
var ais = xmlDoc.getElementsByTagName("string");
var data = ais[0].childNodes[0];
callback(data);
}
} catch (ex) {
alert(ex);
}
}
});
};
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.layout.container.HBox',
'Ext.window.MessageBox'
]);
Ext.define('Item', {
extend: 'Ext.data.Model',
fields: ['id','pid','text']
})
function getAreaTree(data,pnode,_id)
{
var _Name = [];
var temp = {id:"",pid:"",text:"",children:[]};
for (var i = 0; i < data.length; i++)
{
if (data[i].sonId == 0 && pnode.id == 0)
{
temp = {};
if (_Name.indexOf(data[i].name) >= 0) {
continue;
}
_Name.push(data[i].name);
temp = { id: data[i].fatherId,pid:data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
getAreaTree(data, pnode.children[pnode.children.length - 1], pnode.children[pnode.children.length - 1].pid);
} else if (data[i].sonId == pnode.id) {
temp = { id: data[i].fatherId, pid: data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
}
}
}
Ext.onReady(function () {
var myData = {};
var _strData = [];
DataAccess('getTree', {}, function (result) {
debugger;
var data = result.data;
var _data = eval('(' + data + ')');
var _ids = 0;
var node = { id: _data[0].fatherId, pid: _data[0].sonId, text: _data[0].name, children: [] };
getAreaTree(_data, node, _ids);
myData = node;
var store = new Ext.data.TreeStore({
model: 'Item',
root: myData
});
Ext.create('Ext.tree.Panel', {
title: 'Area',
width: 200,
height: 500,
store: store,
rootVisible: false,
renderTo: 'container'
});
});
});
'Ext.tree.*',
'Ext.data.*',
'Ext.layout.container.HBox',
'Ext.window.MessageBox'
]);
Ext.define('Item', {
extend: 'Ext.data.Model',
fields: ['id','pid','text']
})
function getAreaTree(data,pnode,_id)
{
var _Name = [];
var temp = {id:"",pid:"",text:"",children:[]};
for (var i = 0; i < data.length; i++)
{
if (data[i].sonId == 0 && pnode.id == 0)
{
temp = {};
if (_Name.indexOf(data[i].name) >= 0) {
continue;
}
_Name.push(data[i].name);
temp = { id: data[i].fatherId,pid:data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
getAreaTree(data, pnode.children[pnode.children.length - 1], pnode.children[pnode.children.length - 1].pid);
} else if (data[i].sonId == pnode.id) {
temp = { id: data[i].fatherId, pid: data[i].sonId, text: data[i].name, children: [] };
pnode.children.push(temp);
}
}
}
Ext.onReady(function () {
var myData = {};
var _strData = [];
DataAccess('getTree', {}, function (result) {
debugger;
var data = result.data;
var _data = eval('(' + data + ')');
var _ids = 0;
var node = { id: _data[0].fatherId, pid: _data[0].sonId, text: _data[0].name, children: [] };
getAreaTree(_data, node, _ids);
myData = node;
var store = new Ext.data.TreeStore({
model: 'Item',
root: myData
});
Ext.create('Ext.tree.Panel', {
title: 'Area',
width: 200,
height: 500,
store: store,
rootVisible: false,
renderTo: 'container'
});
});
});
3.页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
<link href="examples/shared/example.css" rel="stylesheet" />
<!--<link href="CSS/grid.css" rel="stylesheet" />-->
<script src="JS/jquery-1.7.2.min.js"></script>
<script src="examples/shared/include-ext.js"></script>
<script src="examples/shared/options-toolbar.js"></script>
<script src="JS/dal.js"></script>
<script src="JS/tree.js"></script>
<style type="text/css">
.x-panel-body p {
margin: 10px;
}
#container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Ext树形控件练习</h1>
<div id="container">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>demo</title>
<link href="examples/shared/example.css" rel="stylesheet" />
<!--<link href="CSS/grid.css" rel="stylesheet" />-->
<script src="JS/jquery-1.7.2.min.js"></script>
<script src="examples/shared/include-ext.js"></script>
<script src="examples/shared/options-toolbar.js"></script>
<script src="JS/dal.js"></script>
<script src="JS/tree.js"></script>
<style type="text/css">
.x-panel-body p {
margin: 10px;
}
#container {
padding: 10px;
}
</style>
</head>
<body>
<h1>Ext树形控件练习</h1>
<div id="container">
</div>
</body>
</html>
未完待续。。。