負載的ExtJS 4的portlet倒塌不能正常工作

Question

我用我的應用程序

ExtJS的門戶代碼我想在摺疊狀態portlet在加載頁面的時間。所以我做了類似

items: [{ 
          id: 'portlet-1', 
          title: 'Grid Portlet Texsds', 
          tools: this.getTools(), 
          height:200, 
          **collapsed:true,** 
          autoScroll :true, 
          items: Ext.create('Ext.app.GridPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this), 
           'endDrag': Ext.bind(this.onPortletDrag, this), 
           'resize' :Ext.bind(this.onPortletResize, this) 
          } 
         } 

我已經使collapsed屬性爲true。但正因爲如此，當我試圖展開portlet [頁面加載後]時，我可以看到空白的Grid.Plz。參考附件圖片。

什麼問題？我需要刷新還是什麼？因爲當我設置爲false時，我可以看到網格。

請建議這裏缺少的東西。

這是GETTOOLS一個代碼：function（）{

{ 
      type: 'Minimize', 
      handler: function(e,target,panelHeader,tool){ 
       //panelHeader.ownerCt.toggleCollapse(); 
       if (panelHeader.ownerCt.collapsed) 
       { 
        panelHeader.ownerCt.expand(); 

       } 
       else { 
        panelHeader.ownerCt.collapse(); 
       } 
      } 
     } 

首次當portlet得到加載它在摺疊狀態下，現在，當我跨點擊圖標不是[該「 ^「展開圖標]我可以看到空白網格。

希望這一次我能夠解釋得很好。

Answer 1

我參加了Ext JS 4示例門戶應用程序，並將您的代碼（不帶星號）添加到portlet-1。它在加載時正確摺疊並展開以顯示網格。

我不認爲您發佈的代碼有任何問題。也許你已經改變了周圍容器的佈局或佈局屬性，這會影響你的portlet。

這裏是我的完整portal.js：

Ext.define('Ext.app.Portal', { 

    extend: 'Ext.container.Viewport', 
    //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ], 
    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], 

    getTools: function(){ 
     return [{ 
      xtype: 'tool', 
      type: 'gear', 
      handler: function(e, target, panelHeader, tool){ 
       var portlet = panelHeader.ownerCt; 
       portlet.setLoading('Loading...'); 
       Ext.defer(function() { 
        portlet.setLoading(false); 
       }, 2000); 
      } 
     }]; 
    }, 

    initComponent: function(){ 
     var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>'; 

     Ext.apply(this, { 
      id: 'app-viewport', 
      layout: { 
       type: 'border', 
       padding: '0 5 5 5' // pad the layout from the window edges 
      }, 
      items: [{ 
       id: 'app-header', 
       xtype: 'box', 
       region: 'north', 
       height: 40, 
       html: 'Ext Portal' 
      },{ 
       xtype: 'container', 
       region: 'center', 
       layout: 'border', 
       items: [{ 
        id: 'app-options', 
        title: 'Options', 
        region: 'west', 
        animCollapse: true, 
        width: 200, 
        minWidth: 150, 
        maxWidth: 400, 
        split: true, 
        collapsible: true, 
        layout:{ 
         type: 'accordion', 
         animate: true 
        }, 
        items: [{ 
         html: content, 
         title:'Navigation', 
         autoScroll: true, 
         border: false, 
         iconCls: 'nav' 
        },{ 
         title:'Settings', 
         html: content, 
         border: false, 
         autoScroll: true, 
         iconCls: 'settings' 
        }] 
       },{ 
        id: 'app-portal', 
        xtype: 'portalpanel', 
        region: 'center', 
        items: [{ 
         id: 'col-1', 
         items: [{ 
          id: 'portlet-1', 
          title: 'Grid Portlet', 
          tools: this.getTools(), 
          collapsed: true, 
          height: 200, 
          autoscroll: true, 
          items: Ext.create('Ext.app.GridPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         },{ 
          id: 'portlet-2', 
          title: 'Portlet 2', 
          tools: this.getTools(), 
          html: content, 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-2', 
         items: [{ 
          id: 'portlet-3', 
          title: 'Portlet 3', 
          tools: this.getTools(), 
          html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>', 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-3', 
         items: [{ 
          id: 'portlet-4', 
          title: 'Stock Portlet', 
          tools: this.getTools(), 
          items: Ext.create('Ext.app.ChartPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        }] 
       }] 
      }] 
     }); 
     this.callParent(arguments); 
    }, 

    onPortletClose: function(portlet) { 
     this.showMsg('"' + portlet.title + '" was removed'); 
    }, 

    showMsg: function(msg) { 
     var el = Ext.get('app-msg'), 
      msgId = Ext.id(); 

     this.msgId = msgId; 
     el.update(msg).show(); 

     Ext.defer(this.clearMsg, 3000, this, [msgId]); 
    }, 

    clearMsg: function(msgId) { 
     if (msgId === this.msgId) { 
      Ext.get('app-msg').hide(); 
     } 
    } 
});