11、前端布局与树形结构搭建指南

neovim7hacker

于 2025-11-19 12:17:09 发布

点赞数

CC 4.0 BY-SA版权

分类专栏：掌握Ext JS实战精髓文章标签： Ext JS 布局设计树形结构

本文链接：https://blog.youkuaiyun.com/neovim7hacker/article/details/155551593

掌握Ext JS实战精髓专栏收录该内容

26 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

前端布局与树形结构搭建指南

1. 布局基础操作

当切换到电影描述标签时，每个面板会显示从 Web 服务器上的文本文件加载的电影描述。使用 autoLoad: 'html/1.txt' 可以将指定 URL 的文件加载到面板的主体部分，加载的文件可包含任何类型的 HTML，不过其中的 JavaScript 不会执行，部分 HTML 会被忽略。并且，如果从文件系统而非本地 Web 服务器运行示例，文件将无法加载。

接下来是在布局中添加工具栏。可以在布局的北部区域添加工具栏，用于放置菜单、按钮、表单字段等。以下是添加工具栏的示例代码：

{
  region: "north",
  xtype: 'toolbar',
  items: [{
    xtype: 'tbspacer'
  },{
    xtype: 'tbbutton',
    text: 'Button',
    handler: function(btn){
      btn.disable();
    }
  },{
    xtype: 'tbfill'
  },
  // more toolbar items here //]
}

这个工具栏能很好地融入布局顶部，可用于应用程序的导航，比如触发在中心区域添加新标签、搜索电影标题等。

还可以在当前为空的西部区域添加一个表单面板，用于添加新电影。使用 xtype 配置进行表单面板的懒实例化，示例代码如下：