• 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>
  • 相关阅读:
    vue2.0 练习项目-外卖APP(2)
    vue2.0 练习项目-外卖APP(1)
    迈向全栈开发学习(3)
    迈向全栈开发学习(2)
    迈向全栈开发学习(1)
    前端到后台ThinkPHP开发整站(完)
    前端到后台ThinkPHP开发整站(7)
    前端到后台ThinkPHP开发整站(6)
    前端到后台ThinkPHP开发整站(5)
    uniapp 设置全局scss生效
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/3106308.html
Copyright © 2020-2023  润新知