ExtJS4 border layout 左侧treePanel 中间 panel

最新推荐文章于 2019-09-05 19:02:51 发布

转载最新推荐文章于 2019-09-05 19:02:51 发布 · 1.2k 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文展示了一个使用ExtJS4的BorderLayout布局管理器的例子。该布局包含一个位于左侧的可折叠树形面板(treePanel)及一个居中的主要内容面板。通过具体代码实现了树形结构的数据展示，并设置了各组件的样式。

ExtJS4 border layout 左侧treePanel 中间 panel

2012年12月14日 ⁄ 综合 ⁄ 共 1898字 ⁄ 字号小中大 ⁄ 评论关闭

id="iframeu1788635_0" src="http://pos.baidu.com/ucxm?rdid=1788635&dc=2&di=u1788635&dri=0&dis=0&dai=2&ps=236x980&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468226569089&ti=ExtJS4%20border%20layout%20%E5%B7%A6%E4%BE%A7treePanel%20%E4%B8%AD%E9%97%B4%20panel%20%7C%20%E5%AD%A6%E6%AD%A5%E5%9B%AD&ari=1&dbv=2&drs=1&pcs=1509x821&pss=1509x256&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468226569&rw=821&ltu=http%3A%2F%2Fwww.xuebuyuan.com%2F253429.html&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DT7VhrxU6cKBC_PO2jOQ8NC_tUYRdar9tGsWiMp9tcCT2433u_SRLmWcfmOkE69q5%26wd%3D%26eqid%3Dbee3ac330000c87e0000000557835bfa&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468226569&qn=01a1fc0f1c14b89d&tt=1468226569070.38.158.162" width="336" height="280" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="margin: 0px; padding: 0px; border-width: 0px; border-style: initial; vertical-align: bottom; background: transparent;">

效果图：

 <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;',
                width: 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',
                width: 600,
                height: 250,
                items: [
                tree,
                main
            ],
                renderTo: Ext.getBody()
            });
        });</script>