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>
  • 相关阅读:
    [转]为Ubuntu Server安装gnome图形桌面环境
    [转]ubuntu 安装五笔输入法
    [转]更改文件所有者
    QT 透明设置
    ubuntu 交叉编译arm linux 内核
    Opencv vs 2005编译
    [转]在skyeye中运行uboot
    object的引用 与 foreach的使用
    音频和视频
    HTML5 Canvas API
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/3106308.html
Copyright © 2011-2022 走看看