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

我想编写自己的布局..（如vbox，border等等）...我想要做的是创建布局，将它的内容放置在中间（垂直 - 中间，水平 - 中间）。如何在ExtJs 4或3中编写自定义布局

有没有人能告诉我这个控件在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要求？怎么运行的？什么时候？为什么？等。

来源

2011-03-17 Ai_boy

为什么哟需要编写自定义布局？你不用ExtJS的布局做什么，或者你有什么特殊情况。我这样问是因为我已经完成了许多基于ExtJS的Web应用程序，并且当您使用ExtJS时，您拥有巨大的力量，您几乎可以轻松完成所有任务，无需担心新的布局或组件。 – Fatih 2011-03-23 09:00:25

我只是想创建布局，将项目放置在垂直和horisontall中心，在我的应用程序中，我将使用这种布局非常灵活，所以我真的需要它...我只有一个谁想要使用这种布局？ o_O – 2011-03-23 09:35:59

“将物品放置在垂直和水平中心”并不意味着什么 - 至少对我而言 - 如果您更清楚地详细说明这一点 - 基本平局可能是最好的方式 - 我会尽力帮助您。 – Fatih 2011-03-23 12:44:27

检查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;

来源

2011-03-17 12:20:28 ChrisR

叶我看到了这个例子..但我太愚蠢:)所以我其实没有得到任何东西.. – 2011-03-17 12:23:10

你也看了看布局扩展的源代码？如果你想写自己的布局管理器，这是你可以得到的最好的恐惧，你是否写过'custom'layout by http://dev.sencha.com/deploy/dev/examples/ux/CenterLayout.js – ChrisR 2011-03-17 12:26:12

你的自我？ – 2011-03-17 12:28:41

Ext.layout.ContainerLayout（对于布局基类）具有doLayout触发容器呈现的方法。

在FitLayout，其被覆盖的情况下，它调用一个自定义函数setItemSize谁呼吁第一容器项目的本地setSize（或者任何所选择的项目），以适应容器大小（最大化我猜）。

检查也是这些自定义布局：http://layoutscroll.demo.revolunet.com/

来源

2011-03-21 11:29:06 jujule

和最后一个链接如何连接'定制'layot？ o_O – 2011-03-22 14:47:36

这是一个自定义布局示例，请参阅此处的代码：http://demo.revolunet.com/gary/demo/Ext.ux.layout.Scroll/src/Ext.ux.layout.Scroll.js – jujule 2011-03-22 15:44:01

ow。 tnx ..我会尽快看到它.. – 2011-03-22 16:12:46

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

来源

2011-10-14 01:43:08 SergeyM

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

回答

相关问题