TabPanel下的Ext.MessageBox

我得到這樣的問題：TabPanel下的Ext.MessageBox

TabPanel有兩個選項卡。首先是FormPanel，其次是GridPanel。

而且我在beforetabchange中添加了監聽器。當FormPanel中的值發生變化時，應該會出現Ext.MessageBox.cofirm，並提出問題：'您想保存更改嗎？'。

它出現在TabPanel下。

它不適用於任何類型的消息框。

這有點奇怪，因爲當我點擊這個表單中的提交按鈕時，有一個等待消息框，保存更改後有信息框。

任何想法？

編輯

我已經移除的TabPanel和FormPanel中所有配置集合這是第一個標籤，所以一切都是默認的。消息框看起來像（現在）：

Ext.MessageBox.confirm('Title','message',Ext.emptyFn);

我認爲問題是，消息框被莫名其妙地GridPanel中這是一個tabpanel下綁定。我已將插件添加到tabPanel，並在beforetabchange事件中顯示此確認消息。有趣的是，我做了完全相同的代碼插件，它被添加到formPanel中提交按鈕，並且那裏的一切都很完美。

編輯的

new Ext.TabPanel({ 
activeTab: 0, 
id: 'tabPanel_id', 
items: [ 
    new Ext.form.FormPanel({ 
     cls: 'xf-windowForm', 
     bodyCssClass: '', 
     autoHeight: false, 
     autoScroll: true, 
     border: false, 
     layout: 'form', 
     buttonAlign: 'center', 
     monitorValid: true, 
     labelAlign: 'right', 
     labelPad: 10, 
     defaults: { 
      msgTarget: 'under', 
      anchor: '100%' 
     }, 
     id: 'formPanel_id', 
     title: translate('tab_title-general'), 
     items: [ 
      new Ext.form.TextField({ 
       fieldLabel: 'label', 
       name: 'name', 
       id: 'id' 
      }) 
     ], 
     buttons: [ 
      new Ext.Button({ 
       text: 'save', 
       type: 'submit', 
       formBind: true, 
       plugins: { 
        init: function (component) { 
         component.on({ 
          click: function() { 
           Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn); 
          } 
         }); 
        } 
       } 
      }) 
     ] 
    }), 
    new Ext.Panel() 
], 
plugins: { 
    init: function(component) { 
     component.on({ 
      beforetabchange: function() { 
       Ext.MessageBox.confirm('title', 'messsage', Ext.emptyFn); 
      } 
     }); 
    } 
} 
});

還有的GridPanel這一個tabpanel下。此按鈕插件中的消息框工作正常（選項卡面板變灰，消息框出現在頂部），但第二個在tabpanels插件中，在網格上添加另一個遮罩，並在面板下方和網格上方顯示。

編輯

Ext.onReady(function(){ 

new Ext.Window({ 
    initHidden: false, 
    width: 700, 
    title: 'WindowTitle', 
    items: [ 
     new Ext.TabPanel({ 
      items: [ 
       new Ext.Panel({title: 'Title1'}), 
       new Ext.Panel({title: 'Title2'}) 
      ], 
      plugins: { 
       init: function(component) { 
        component.on({ 
         beforetabchange: function(t,c,n) { 
          Ext.MessageBox.confirm('MessageBoxTitle', 'Confirm message.', Ext.emptyFn, component); 
         } 
        }); 
       } 
      } 
     }) 
    ] 
}); 
});

這其中出現問題的完整代碼。窗口顯示事件中的消息框顯示正常，但在tabPanel中顯示在窗口下。

我正在使用FF 4.0.1，但在IE 8和Chrome 12中也出現問題。我使用的是Ext JS 3.3.1。

溶液

窗口的z索引必須降低（即至7000，缺省值爲9000）。爲此，我使用了Ext.WindowGroup。

windows = new Ext.WindowGroup(); 
windows.zseed = 7000; 
//and in config properties in window: 
manager:windows

感謝大家的幫助。

來源

2011-06-10 Sebastian Malaca

它是否在所有瀏覽器中都存在？ tabpanel和messagebox的'z-index'是什麼？ – Kevin 2011-06-10 11:14:09

這發生在所有瀏覽器中。 TabPanel在9013上設置z-index，在9003上設置messagebox，即使我添加樣式類。 – 2011-06-10 13:57:54

你可以顯示你的tabpanel和messagebox的代碼嗎？ – JamesHalsall 2011-06-10 14:17:28

「我認爲問題在於消息框以某種方式綁定到了tabPanel下的gridPanel。「

MessageBox的未綁定到現有的面板，其獨立的，並基本上是一個快捷方式創建渲染到所述主體的窗口，每個源代碼：

http://dev.sencha.com/deploy/ext-3.3.1/docs/source/MessageBox.html#cls-Ext.MessageBox

凱文是上一些與Z指數是一個可能的罪魁禍首，因爲我已經解決了與ext.Notifications ux具有較低的Z指數比主要內容的問題。

嘗試從控制檯運行您的messagebox調用和看看它是否出現，這將有助於確定您的等待消息框是否正在關閉確認混亂agebox（請注意提到它是上面的單例），或者在你沒有看到一些其他的JavaScript錯誤導致你的代碼不能運行的地方。然後，如果你沒有看到在MessageBox從控制檯運行時，嘗試ISVISIBLE（）API調用，看看它是否認爲其顯示（這可能會縮小它的CSS問題）。直到用戶做了一個alert()的方式做

來源

2011-06-12 23:39:42 qooleot

我已經添加了一些代碼的問題。 – 2011-06-13 06:45:09

消息框出現了，如果我添加帶z-index的樣式類！重要的是它的工作原理（在頂部顯示）幾乎完美，但是在標籤面板上沒有蒙版，並且它仍然看起來像向網格面板添加第二個蒙版。 – 2011-06-13 06:48:52

@sebastian好這些URL通過下方的nonclickable層加一個遮蔽，遮蔽不特定的面板在它之下，因此它不應該適用於標籤面板，而不是比我想的CSS問題的其他電網。嘗試加一個遮蔽的一個tabpanel單獨通過。 tabpanel.getEl（）掩碼（「測試面罩」），看它是否有一個面具一個z-index的問題。你在做什麼：cls：'xf-windowForm'呢？通常我不會在窗體中的窗體上看到與窗口類屬性有關的任何類。 – qooleot 2011-06-13 11:09:03

內線消息框不會阻止你的代碼。因此，它將彈出消息框，然後繼續渲染用戶剛剛單擊的新選項卡。也許當新選項卡呈現時，Ext窗口管理器會將該窗口放在最前面，因爲它最近呈現？

你可以嘗試使用setTimeout顯示在短暫延遲後，消息框。這將使新標籤有機會置頂，然後消息框呈現，希望在所有內容之上呈現，因爲它是最新的。

來源

2011-06-13 15:58:53

我添加了'return false;'在這個tabpanel插件中，所以現在沒有創建任何東西，但情況依然如此。 – 2011-06-13 20:16:32

的setTimeout會的工作，有喜歡

PAGE-按鈕同樣的問題 - 在點擊 - 窗口格 - 點擊電網用品 - >應該是在頂部的消息框，但它是下窗，然後我試圖

點擊網格用品 - 的setTimeout（函數（），200 {Ext.MessageBox.alert（ 'MessageBoxTitle'，） '確認消息。'}）;

來源

2011-12-22 11:31:40

我已經使用了下面的方法。它爲我工作。

beforetabchange: function(tabpanel, newTab, oldTab){ 
     if (!tabpanel.allowAction){ 
      Ext.Msg.confirm('Confirm', 'Your Message',function(btn) { 
      if (btn == 'yes') { 
       /* logic*/ 
      tabpanel.allowAction = true; 
       this.setActiveTab(newTab.id); 
      }else{ /* logic */} 

     }); 
      return false; 
     } 
     delete tabpanel.allowAction; 
    }

來源

2013-12-17 06:32:48 Sudarshan

Ext.create('Ext.window.MessageBox', { alwaysOnTop: true, closeAction: 'destroy' }).show({ title: 'Title', buttons: Ext.Msg.OK, message: 'Message' });

這應該使消息框出現在頂部。

看該頁面中的第四個例子。

http://docs.sencha.com/extjs/5.1.0/api/Ext.window.MessageBox.html

來源

2017-04-12 16:36:38

TabPanel下的Ext.MessageBox

回答

相關問題