卡布局不承認浮動面板

我開始Sencha觸摸並與浮動面板有一個小問題。這個想法是創建一個小的登錄面板來授予對應用程序主面板的訪問權限。該視口是一個帶有卡片佈局和兩個面板的面板，即loginPanel和mainPanel。卡布局不承認浮動面板

我的第一種方法是爲登錄表單創建一個浮動FormPanel並將其插入到視口中，但問題是此Panel伸展到整個視口，而不是按屬性中指定的居中。我能得到它下面的唯一方法：

var App = new Ext.Application({ 
    name: 'tool' 
    ,useLoadMask: true 
    ,launch: function(){ 

     tool.views.loginPanel = new Ext.Panel({ 
      listeners: { 
       afterrender: function(){ 
       //setTimeout('loginForm.show();', 2000); 
       tool.views.loginForm.show(); 
       } 
      } 
     }); 

     tool.views.loginForm = new Ext.form.FormPanel({ 
         floating: true 
         ,width: 350 
         ,height: 300 
         ,centered: true 
         ,modal: true 
         ,hideOnMaskTap: false 
         ,dockedItems:[{ 
          xtype: 'toolbar' 
          ,title: 'Identificación' 
          ,ui: 'light' 
          }], 
         items: [{ 
          xtype: 'fieldset' 
          ,id: 'loginFormSet' 
          ,title: '' 
          ,items: [ 
           { 
            xtype: 'emailfield', 
            placeHolder: 'Usuario', 
            name: 'Usuario', 
            id: 'Username', 
            required: true, 
           }, { 
            xtype: 'passwordfield', 
            placeHolder: 'Password', 
            name: 'Password', 
            required: true 
           }, { 
            xtype: 'checkboxfield', 
            id: 'RememberMe', 
            name: 'RememberMe', 
            label: '¿Guardar ID?', 
            labelWidth: '40%' 
           },{ 
            xtype: 'button', 
            text: 'Acceder', 
            ui: 'confirm', 
            style: 'margin:2%;', 
          handler: function(){ 
           mainPanel.setActiveItem(1); 
           loginForm.destroy(); 
          } 

            }] 
          }] 
       }); 

     tool.views.viewport = new Ext.Panel({ 
      fullscreen: true 
      ,cls: 'mi_clase1' 
      ,layout: 'card' 
      ,cardAnimation: 'slide' 
      ,items: [tool.views.loginPanel] 

     }) // Fin del PAnel viewPort 
    } // Find de funcion ,launch 
}) // Fin de la application

正如你可以看到，登錄表單有一個面板中插入，這個面板與卡布局視口。如果我在視口中插入formPanel，它不起作用。爲什麼是這樣？我做錯了什麼？或者這種方式是在卡片佈局中獲得浮動面板的唯一方法？

另一個問題是： setTimeout（'loginForm.show（）;'，2000）;

它沒有工作，也沒有顯示任何東西。任何想法？

非常感謝

來源

2011-07-03 Dalton

一個部分 - 一般情況下，煎茶觸摸應用程序應該包含一個全屏面板。這稱爲視口，它充當所有其他組件的容器。當您創建一個沒有視口的浮動窗口時，它沒有任何參考框架將其自身居中。

第二部分 - 而不是：

setTimeout('loginForm.show();', 2000);

試試這個：

setTimeout('tool.views.loginForm.show();', 2000);

來源

2011-07-05 14:09:23 nelstrom

非常感謝@nelstrom。你對第二部分的回答非常明顯，我覺得很尷尬;）但是第一部分並不那麼明確。我知道必須有一個「全屏」的視口作爲整個應用程序的基礎，我確實有它（tool.views.viewport）。問題是，如果我向這個視口添加「，items：[tool.views.loginForm]」，則FormPanel會被拉伸，而不是浮動。爲了讓它浮動，我必須將另一個面板（tool.views.loginPanel）添加到portview，然後將浮動面板添加到另一個面板。我不明白爲什麼。 Dalton – Dalton

卡片佈局擴展了Fit版面，因此會擴展任何孩子以填充其尺寸。這就是爲什麼當您的登錄表單直接添加到您的視口時顯示展開，而不是作爲第二個孩子添加時。浮動面板基本上是'窗口'，因此可能不應該添加到任何父級，而是保持獨立，並調用show（）方法。這樣，他們將「浮動」在其他內容之上，而不是其他組件佈局的一部分。 – Stuart

明白了，這聽起來很合理。我會試一試，並將loginPanel「浮動」，而不是添加到任何其他面板。道爾頓 – Dalton

卡布局不承認浮動面板

回答

相關問題