• 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>
  • 相关阅读:
    用Maven插件生成Mybatis代码
    年薪50万的大数据分析师养成记
    利用 index、explain和profile优化mysql数据库查询小结
    perl MQSeries::Queue sync方法
    新零售不简单,当初马云自己都没解释清楚!
    新零售不简单,当初马云自己都没解释清楚!
    elasticsearch 默认不支持检索hadoop
    以不能久驻世上的心态处理日常事务——北漂18年(89)
    数据化管理在餐饮业中的应用
    解决Linux出现"Device eth0 does not seem to be present"问题
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/3106308.html
Copyright © 2020-2023  润新知