Extjs border 布局

最新推荐文章于 2026-05-01 14:37:43 发布

原创最新推荐文章于 2026-05-01 14:37:43 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#border #extjs #menu #function #html

ExtJs 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架构建的Web应用程序示例，包括边界布局管理器(Border Layout Manager)的应用，以及如何实现导航树(TreePanel)、标签页(TabPanel)等功能组件，并演示了如何响应树节点点击事件。

 Ext.onReady(function(){
  new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border:false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        split: true,
        loader: new Ext.tree.TreeLoader(),
        root: new Ext.tree.AsyncTreeNode({
            expanded: true,
            children: [{
                text: 'Menu Option 1',
                children:[
                {text:'Menu Option1-1',
                 leaf: true
                 }]
            }, {
                text: 'Menu Option 2',
                leaf: true
            }, {
                text: 'Menu Option 3',
                leaf: true
            }]
        }),
        rootVisible: false,
        listeners: {
            click: function(n) {
                Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            title: 'Tab1',
            html: 'The first tab\'s content. Others may be added dynamically'
        },{
        	title:'Tab2'
        }]
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }]
});