使用Ext 创建树

ext使用的是ext3.4.0版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Hello-Ext</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js" ></script>
    <script type="text/javascript" src="ext/ext-all.js" ></script>
    <script type="text/javascript" src="js/win.js" ></script>
    <script type="text/javascript" >
        /*Ext.onReady(function () {
            var win = new Ext.Window({
                width: 600,
                height: 500,
                title: "测试窗口",
                buttons: [{ text: "确定" }, {text:"取消"}]
            });

            win.show();
        });*/
    </script>
</head>
<body>

</body>
</html>

ext创建树的脚本

function ShowWindow() {
    //调用button的on方法设置监听函数
    var btn = new Ext.Button({
        text: "创建一个窗口"
    });
    btn.on("click", ShowMinWindow);

    var win = new Ext.Window({
        width: 500,
        height: 300,
        title: "My Ext Window",
        maximizable: true,
        minimizable: true,
        maximize: function () { win.hide(); },
        buttons: [{ text: "创建一个带数的窗口",
            listeners: {
                click: function () {
                    var tree = new Ext.tree.TreePanel({

                        width: 500,
                        height: 300,
                        title: "树的测试",
                        root: new Ext.tree.AsyncTreeNode({
                            text: "子节点1",
                            children: [{ text: "子节点11", children: [{ text: "子节点111", leaf: true}] }, { text: "子节点2", leaf: true}]
                        })
                    });

                    var w1 = new Ext.Window({
                        width: 300,
                        height: 400,
                        title: "树",
                        items: [tree]
                    });
                    //w1.add(tree);
                    w1.show();
                }
            }
        }, btn]
    });
    win.show();
}

function ShowMinWindow() {
    var win = new Ext.Window({
        width:200,
        height: 100,
        title:"弹出窗口"
    });
    win.show();
}

Ext.onReady(ShowWindow);

效果如下图

时间: 2024-11-09 00:48:42

使用Ext 创建树的相关文章

ExtJs通过后台动态创建树

ExtJs动态创建树的方法是:当树的TreeStore要加载的时候,通过ajax请求后台数据,根据后台返回数据动态加载树结构. 正常情况下我们定义TreeStore是这样定义的: var tree = Ext.create('Ext.data.TreeStore', { root : { expanded : true, children : [ { text : "操作", id : "operator", expanded : true, children :

创建树 - #号法

#创建树,让树的每一个节点都变成度数为2的树 通过先序遍历124###3##可以唯一确定一棵树. // nonrecursion.cpp // 对树的操作 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <cstdio> #include <stack> using namespace std; // 二叉树表示法 typedef struct BiTNode { int data; struct

Windows Server 2012(单林、多树、多站点)AD 部署系列(五)创建树域

本章博文开始在BJ.SH.GZ站点为林bicionline.org 创建树域控及调配的相关DNS等功能. 网络配置: 1.为BJ站点ds04.SH站点pdc02和GZ站点ad02配置网络, IP配置分别如下:(注:在创建域树环境时,确保加入域树环境的计算机网络dns地址指向建立林时的第一台域控制器DNS地址 ) ds04:172.16.10.104 ,子网掩码:255.255.255.0 网关:172.16.10.254 ,DNS 172.16.10.100 , ad02:172.16.29.1

树和森林v2.0 层次非递归创建树和森林,森林中的树不连

#include <iostream> #include"queue.h"//之前写的类 #include"stack.h" //之前写的类 using namespace std; /* 用二叉树的方式实现 root指针指向第一棵树的根节点 */ template <class T> class Forest; //======================================== // 森林节点类声明 template &l

webform 创建树

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data; namespace WebApplication4{    public partial class WebForm1 : System.Web.UI.Page    {        DataT

通过前序(后序)+中序创建树

通过二叉树的前序遍历和中序遍历创建树 #include<stdio.h> #include<stdlib.h> #include<string.h> typedef struct NODE { int nValue; struct NODE* pLeft; struct NODE* pRight; }BinaryTree; int Getxb(char* inorder,int num) { //得到根在中序遍历中的下标 for(int i=0;i<strlen(

jstree插件的使用(进阶)——动态json数据创建树

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- jstree css样式 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/lib

net core 通过js打印集合(创建树)

结合ASP.NET CORE,将控制器执行后的数据结果打印在网页控制台 将行数据转为树形结构(采用linq+lambda+递归) using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace WebApplication1.Logic.CreateTree { public class Node { public int id; public s

ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2

运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的index.jsp的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% response.setHeade