我想写我自己的布局..(比如vbox
, border
等等)...我想做的是创建布局它的内容在中间(垂直 - 中间,水平 - 中间)..
是否有人可以向我展示此控件在 extJs 中的外观或可以提供一些可能有用的链接?
我有这个例子来自
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
// private
setItemSize : function(item, size){
this.container.addClass('ux-layout-center');
item.addClass('ux-layout-center-item');
if(item && size.height > 0){
if(item.width){
size.width = item.width;
}
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
但它给我的问题多于答案。什么是 setItemSize
它是如何工作的?什么时候?为什么?等。 item.setSize
的作用是什么?怎么运行的?什么时候?为什么?等等。
最佳答案
检查 ExtJS 3 的示例,在自定义布局下已经有一个 Ext.ux.Layout.CenterLayout
,也许是一个很好的起点?
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
编辑:试试这个布局用户扩展,它将一个元素置于其容器的水平和垂直中心
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;
关于javascript - 如何在 ExtJs 4 或 3 中编写自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5338898/