extjs tree的使用

最新推荐文章于 2021-02-13 08:34:41 发布

poplau

最新推荐文章于 2021-02-13 08:34:41 发布

阅读量2.1k

点赞数

文章标签： extjs tree json function border html

本文链接：https://blog.csdn.net/poplau/article/details/2317710

版权

搞了两天,终于有些眉目.
关于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
                    }

poplau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
extjs tree的使用

搞了两天,终于有些眉目. 关于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader几个配合,其中需要涉及到JSON,好象是javascriptobjectnode的缩写.不晓得对不对哈. json开始比较难理解,其实就是用一个aspx程序生成一个符合TreeLoader的字符串就好了.这个不好说,只有贴代码.该程序调试通过,其中
复制链接

扫一扫