zoukankan      html  css  js  c++  java
  • ExtJS4 border layout 左侧treePanel 中间 panel

    效果图:

     <link href="../extjs-4.1.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="../extjs-4.1.1/ext-all-debug.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                var store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: [
                    { text: "detention", leaf: true },
                    {
                        text: "homework",
                        expanded: true,
                        children: [
                            { text: "book report", leaf: true },
                            { text: "alegrbra", leaf: true }
                        ]
                    },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true },
                    { text: "other", leaf: true }
                ]
                    }
                });
                var tree = Ext.create('Ext.tree.Panel', {
                    region: 'west', //for border layout
                    collapsible: true,
                    title: 'Simple Tree',
                    bodyStyle: 'background:#ffc;',
                    200,
                    store: store,
                    rootVisible: false,
                    margins: '5 0 5 5'
                });
                var main = Ext.create('Ext.panel.Panel', {
                    region: 'center', //for border layout
                    title: 'Main Panel',
                    bodyPadding: 10,
                    html: 'html content',
                    margins: '5 5 5 5'
                });
                Ext.create('Ext.panel.Panel', {
                    layout: 'border',
                    600,
                    height: 250,
                    items: [
                    tree,
                    main
                ],
                    renderTo: Ext.getBody()
                });
            });
    </script>
  • 相关阅读:
    Atitit 华为基本法 attilax读后感
    Atitit 华为管理者内训书系 以奋斗者为本 华为公司人力资源管理纲要 attilax读后感
    Atitit 项目版本管理gitflow 与 Forking的对比与使用
    Atitit 管理的模式扁平化管理 金字塔 直线型管理 垂直管理 水平管理 矩阵式管理 网状式样管理 多头管理 双头管理
    Atitit 乌合之众读后感attilax总结 与读后感结构规范总结
    深入理解 JavaScript 异步系列(4)—— Generator
    深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
    深入理解 JavaScript 异步系列(2)—— jquery的解决方案
    深入理解 JavaScript 异步系列(1)——基础
    使用 github + jekyll 搭建个人博客
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/3106308.html
Copyright © 2011-2022 走看看