搞了两天,终于有些眉目.
关于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader几个配合,其中需要涉及到JSON,好象是javascriptobjectnode的缩写.不晓得对不对哈.
json开始比较难理解,其实就是用一个aspx程序生成一个符合TreeLoader的字符串就好了.这个不好说,只有贴代码.该程序调试通过,其中admin.html是前台展示页面,get-nods.aspx是根据参数返回json字符串.另外有两个类,处理了一下.
/*admin.html*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="/js/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/js/extjs/examples/examples.css" rel="stylesheet" type="text/css" />
<link href="/js/extjs/examples/tree/dependency.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/extjs/ext-all.js"></script>
<script type="text/javascript" src="/js/extjs/examples/examples.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 200,
animate: true,
maxSize: 400
},
center: {
autoScroll: false
}
});
layout.beginUpdate();
//layout.add('west', new Ext.ContentPanel('nav1', {title: '控制面版', fitToFrame:true, closable:false}));
var navinnerLayout = new Ext.BorderLayout('nav', {
south: {
split:true,
initialSize: 20,
minSize: 20,
maxSize: 20,
autoScroll:false,
collapsible:true,
titlebar: false
},
center: {
autoScroll:true
}
});
navinnerLayout.add('south', new Ext.ContentPanel('navbottom'));
navinnerLayout.add('center', new Ext.ContentPanel('nav1'));
layout.add('west', new Ext.NestedLayoutPanel(navinnerLayout));
var innerLayout = new Ext.BorderLayout('content', {
north: {
split:true,
initialSize: 20,
minSize: 20,
maxSize: 20,
autoScroll:false,
collapsible:true,
titlebar: false
},
center: {
autoScroll:true
}
关于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader几个配合,其中需要涉及到JSON,好象是javascriptobjectnode的缩写.不晓得对不对哈.
json开始比较难理解,其实就是用一个aspx程序生成一个符合TreeLoader的字符串就好了.这个不好说,只有贴代码.该程序调试通过,其中admin.html是前台展示页面,get-nods.aspx是根据参数返回json字符串.另外有两个类,处理了一下.
/*admin.html*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="/js/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/js/extjs/examples/examples.css" rel="stylesheet" type="text/css" />
<link href="/js/extjs/examples/tree/dependency.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/extjs/ext-all.js"></script>
<script type="text/javascript" src="/js/extjs/examples/examples.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 200,
animate: true,
maxSize: 400
},
center: {
autoScroll: false
}
});
layout.beginUpdate();
//layout.add('west', new Ext.ContentPanel('nav1', {title: '控制面版', fitToFrame:true, closable:false}));
var navinnerLayout = new Ext.BorderLayout('nav', {
south: {
split:true,
initialSize: 20,
minSize: 20,
maxSize: 20,
autoScroll:false,
collapsible:true,
titlebar: false
},
center: {
autoScroll:true
}
});
navinnerLayout.add('south', new Ext.ContentPanel('navbottom'));
navinnerLayout.add('center', new Ext.ContentPanel('nav1'));
layout.add('west', new Ext.NestedLayoutPanel(navinnerLayout));
var innerLayout = new Ext.BorderLayout('content', {
north: {
split:true,
initialSize: 20,
minSize: 20,
maxSize: 20,
autoScroll:false,
collapsible:true,
titlebar: false
},
center: {
autoScroll:true
}