EXTJS 4.2浮子上的按鈕來固定位置的應用

我的應用程序需要一個有一個按鈕，將調用面板，保存在導航欄中顯示一次點擊。

這個按鈕必須在任何時候都可以看到，並居中垂直於中部和屏幕的右側。

如何實現這種行爲？我不想窩在面板的按鈕，它應該是視口的一部分...

這是我曾嘗試：

Ext.define('NG.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    layout: 'border', 
    id: 'appviewport', 
    items: [{ 
     itemId: 'app-header', 
     xtype: 'appheader', 
     region: 'north', 
     weight: 10, 
     border: false, 
     height: 60 
    }, { 
     itemId: 'navigation', 
     xtype: 'button', 
     region: 'west', 
     weight:15 
    }, { 
     xtype: 'carddeckmanager', 
     region: 'center', 
     weight:10, 
     border: false, 
     cls:'n-cardmanager-box', 
     items: [{ 
      itemId: 'dashboard', 
      xtype: 'dashboard' 
     }] 
    }] 
});

但這使得按鈕擴大視口的高度。

來源

2013-07-23 AMember

您試過了，請更新jsfiddle？ – falguni

明白了你的要求，但我們無法爲您提供需要的代碼。如果您遇到任何問題，請嘗試並拿出代碼。 – Hariharan

如果你真的想float那個按鈕，將它添加到容器或視口是沒有意義的。它渲染到文檔身體，用floating: true配置它，並給它的z-index，這將確保它仍然高於任何窗口（如果這就是你想要的）。

然後您要與其alignTo方法，但是，更重要的是，使用以便它堅持，你把它，甚至當瀏覽器大小，您可以放置它。

所有這一切都爲我們提供了：

var body = Ext.getBody(); 

// Create the button 
var button = Ext.widget('button', { 
    text: "Yo" 
    ,floating: true 
    ,renderTo: body 
}); 

// z-index 
// Ext4's windows default z-index starts from 29000 
button.setZIndex(40000); 

// Anchor the right of the button to the right of the document body 
// with a 5px horizontal offset. 
button.anchorTo(body, 'r-r', [-5, 0]);

在應用程序的啓動過程中的某個地方將這個代碼。考生可能是您的應用程序，該initComponent方法視口的，或單afterrender監聽器與視窗的init方法...

現在，如果你想要的是剛纔那個按鈕的右邊框仍然可見視但是沒有它填補了整個區域，需要用適當的佈局，它包裝在一個容器中。例如，將此添加到您的視口：

{  
    region: 'west', 
    layout: {type: 'hbox', pack: 'center', align: 'middle'}, 
    items: [{ 
     xtype: 'button', 
     text: "Viewport button" 
    }] 
}

來源

2013-07-23 11:41:02 rixo

很好的答案，正是我需要的！謝謝 – AMember

當我滾動頁面時，如何停止拖動面板，我試圖將浮動設置爲false，並且它不起作用？當我對齊它時，我不需要面板移動。謝謝 – Aringan

Err ...我只能猜測你在做什麼......你嘗試過'alignTo'而不是'anchorTo'嗎？ – rixo

EXTJS 4.2浮子上的按鈕來固定位置的應用

回答

相關問題