Javascript 如何在ExtJs 4或3中编写自定义布局

我想写我自己的布局。。（如

vbox

，

border

等等）。。。我想做的是创建布局，将它的内容放在中间（垂直-中间，马蹄-中间）…< /P> 是否有人可以向我展示这个控件在extJs中的样子，或者提供一些有用的链接？

---

我有这个例子

---

但它给我的问题比答案多。。什么是

setItemSize

它是如何工作的？什么时候为什么？发射型计算机断层扫描仪。调用

item.setSize

的目的是什么？它是如何工作的？什么时候为什么？等等。

检查ExtJS3的示例，在自定义布局下已经有了一个

Ext.ux.Layout.CenterLayout

，也许是一个好的起点

---

编辑：尝试此布局用户扩展，它将项目居中于其容器的水平和垂直中心

Ext.ns('Ext.ux.layout');

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize:true,
    type: 'ux.center',
    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        if (!target) {
            return {};
        }
        return target.getStyleSize();
    },
    onLayout : function(ct, target){
        Ext.ux.layout.CenterLayout.superclass.onLayout.call(this, ct, target);
        if(!ct.collapsed){
            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
        }
    },
    setItemSize : function(item, size){
        var left = (size.width - item.getWidth()) / 2;
        var top  = (size.height - item.getHeight()) / 2;

        var pos = Ext.apply(item.getEl().getPositioning(), {
            position : 'absolute',
            left     : left,
            top      : top
        });
        item.getEl().setPositioning(pos);
    }
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

（布局的基类）有一个触发容器渲染的

doLayout

方法

在的情况下，它将被重写，并调用一个自定义的

setItemSize

函数，该函数为第一个容器项（或所选项，如果有的话）调用本机函数，以适应容器大小（我猜是最大化）

---

还可以查看这些自定义布局：

Ye我看到了这个示例。。但是我太蠢了：）所以我实际上什么也没得到..你也看了布局扩展的源代码？如果你想写你自己的布局管理器，恐怕这是你能得到的最好的，你自己写的“自定义”布局吗？你是什么意思？如果我自己写过下一个版面经理？我是说。。。您是否自己编写过“自定义”布局管理器？最后一个链接如何与“自定义”布局连接？o_Oit是一个自定义布局示例，请参见此处的代码：为什么需要编写自定义布局？您对ExtJS的布局没有做什么，或者您的具体情况是什么。我这样问是因为，我已经做了很多基于ExtJS的web应用程序，当你使用ExtJS时，你有巨大的能力，你几乎可以轻松地做任何事情，而不用担心新的布局或组件。我只想创建一个布局，将项目放置在垂直和水平中心，在我的应用程序中，我将使用这个布局非常不方便，所以我真的需要它。。。我是唯一一个想使用这种布局的人吗？o_o“将项目放置在垂直和水平中心”并不意味着什么-至少对我来说-如果你能更清楚地描述这一点-基本绘图可能是最好的方法-我会尽力帮助你。这里有一个例子，打开这个，然后转到自定义布局-中心。。。好的，我想要这样的东西，但布局必须对齐水平和垂直中心。。。不仅仅是水平线。。。

Ext.ns('Ext.ux.layout');

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout, {
    monitorResize:true,
    type: 'ux.center',
    getLayoutTargetSize : function() {
        var target = this.container.getLayoutTarget();
        if (!target) {
            return {};
        }
        return target.getStyleSize();
    },
    onLayout : function(ct, target){
        Ext.ux.layout.CenterLayout.superclass.onLayout.call(this, ct, target);
        if(!ct.collapsed){
            this.setItemSize(this.activeItem || ct.items.itemAt(0), this.getLayoutTargetSize());
        }
    },
    setItemSize : function(item, size){
        var left = (size.width - item.getWidth()) / 2;
        var top  = (size.height - item.getHeight()) / 2;

        var pos = Ext.apply(item.getEl().getPositioning(), {
            position : 'absolute',
            left     : left,
            top      : top
        });
        item.getEl().setPositioning(pos);
    }
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'hbox',
            pack: 'center',
            align: 'middle'
        },
        items: [
            {
                html: 'Hello World'
            }
        ]
    });