[ExtJS]Layout 布局

最新推荐文章于 2020-04-17 19:28:26 发布

原创

最新推荐文章于 2020-04-17 19:28:26 发布 · 1k 阅读

标签

#layout #ExtJs

收录于

这篇博客深入探讨了ExtJS中的布局管理，包括横向布局、垂直布局和中心布局。通过三个示例（Demo1、Demo2、Demo3）详细解释了如何设置和使用这些布局，强调了layout属性只影响直接子元素的规则。文中还提到了官网提供的更多布局示例，适合想要了解和掌握ExtJS布局机制的开发者。

在ExtJS里，布局形态用layout, 用法如下：

{
    xtype:'容器控件',
    layout:'布局类型',
    items:[
        {
            xtype:'子控件1'
        },
        {
            xtype:'子控件2'
        }
    ]
}

上述代码翻译成人话就是：

让某个容器控件里的 子元素 按照 XX类型的方式布局

注意：

layout属性，仅影响自己的孩子辈，就是说如果有祖孙三代，爷爷设置了layout属性，父辈会受布局影响，而如果父辈容器没设置layout,孙子元素也不会受爷爷辈的layout属性影响（不理解就去看demo3 ）

Demo1 横向布局

想让某个container里的元素都进行横向布局

{
    xtype:'container',
    layout:'hbox',//里面的按钮子元素就会横向布局了
    items:[
        {
            xtype:'button',
            text:'按钮1'
        },
        {
            xtype:'button',
            text:'按钮2'
        }
    ]
}