如何在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中編寫自定義佈局

回答

相關問題