Question

我有一个面板，卡片布局有多张卡片。我在面板中添加了一个div标签作为中央通知区域，以显示所有卡的警报/通知。这样，我不需要为每张卡添加div标签。但是当通知显示在屏幕的右上角时，它会将卡的所有内容都移开，当通知消失时，内容会向上移动。

 My.cards.Panel
   ,extend:"Ext.panel.Panel"
   ,border: false
   ,bodyStyle:"padding:5px;"
   ,layout:{type:"card", deferredRender:true}

   ,html:[<div id = centralnotificationbar align = right>,</div>]
   ,initComponent: function() {
      // all cards are in here in separate containers
    }

然后更新DIV我做

Ext.get("centralnotificationbar).update("<img src='image.png' style='width:16px;height:16px;'> <span style='color:#00FF00;'>"+messageGoesHere+"</span>");

我还使用Ext.Function.defer使通知在x毫秒后消失。

Answer 1

您的div是block element，这意味着它会影响其下的块，例如卡片。您需要更改其CSS以使其成为inline。有多种方法可以做到这一点，您可以将display属性声明为inline，或者您可以创建float:right等。

ExtJS - 更新父容器中的DIV会将子容器中的内容向下移动

1 个答案: