extjs 3.4面板崩潰時滾動條消失

我正在創建一個使用多個Panel組件的EXT窗體，其中一個組件摺疊到左側。當它這樣做時右邊的Panel（稱爲centrePanel，因爲儘管它在右邊有一個'中心'區域），並且其子節點擴展。 centrePanel的直接子女是Panel，如果其上的數據不適合Panel，則該子女已被設置爲滾動。我遇到的問題是，當我摺疊左側的Panel時，任何滾動條消失。擴展不會使他們回來。但有兩點需要注意：extjs 3.4面板崩潰時滾動條消失

我仍然可以使用鼠標在兩個Panel之間滾動。
摺疊後的Panel摺疊並展開一次，並且任何滾動條消失後，當左側Panel隨後摺疊時，其他面板上的滾動條再次短暫可見。一旦崩潰事件結束，滾動條不再可見。當Panel再次展開時，不會發生這種情況。

這裏是相關的代碼。

可摺疊Panel（宣佈對飛作爲窗口的項目的一部分）：

  region: "west", 
     width: "38%", 
     title: "Filter", 
     collapsible: true, 
     items: [myFilterFormPanel], 
     listeners:{ 
      collapse: function(panel){ 
       //Make centre panel and children wider when filter panel is collapsed. 
       centrePanel.setWidth(1000); 
       searchResultsPanel.setWidth(1000); 
       myColumnModel.setColumnWidth(0, 540); 
       myColumnModel.setColumnWidth(1, 165); 
       myColumnModel.setColumnWidth(2, 165); 
       }, 
      expand: function(panel){ 
      //Make centre panel and children wider when filter panel is collapsed. 
      centrePanel.setWidth(659); 
      searchResultsPanel.setWidth(659); 
      myColumnModel.setColumnWidth(0, 200); 
      myColumnModel.setColumnWidth(1, 90); 
      myColumnModel.setColumnWidth(2, 90); 
     } 
    }

myFilterFormPanel：

var myFilterFormPanel = new Ext.FormPanel({ 
    border: false, 
    id: windowId + "myfilter", 
    items: [stationsPanel, datesPanel, daysPanel, impactPanel, searchButton] 
});

centrePanel（包含可滾動的面板，但不是滾動本身）：

var centrePanel = new Ext.Panel({ 
    border: false, 
    items: [searchResultsPanel, individualResultPanel] 
    } 
});

searchResultsPanel（它變成可滾動的必要時）：

 var searchResultsPanel = new Ext.grid.GridPanel({ 
      title: "All Results", 
      id: windowId + "allresults", 
      region: "north", 
      height: 250, 
      border: false, 
      padding: 10, 
      autoScroll: true, 
//   style:'overflow-y:auto', 
      colModel: myColumnModel, 
      store: myStore, 
      listeners: { 
       rowclick: function(thisRow, rowIndex){ 
        //Display additional information in individual result panel. 
        var myData = myStore.getAt(rowIndex).data; 
        individualResultPanel.body.update("<h1><u>Summary</u></h1><p>" + myData.summary + "</p>" 
         + "<h1><u>Body</u></h1><p>" + myData.body + "</p>" 
         + "<h1><u>Additional Information</u></h1><p>" + myData.additionalInformation + "</p>" 
         + "<h1><u>Customer Information</u></h1><p>" + myData.customerInformation + "</p>" 
         + "<h1><u>Further Information</u></h1><p>" + myData.furtherInformation + "</p>""); 
       } 
      } 
     });

individualResultPanel（也成爲可滾動的）;

var individualResultPanel = new Ext.Panel({ 
    border: false, 
    autoScroll: true, 
    title: "Selected Result", 
    id: windowId + "individualresult", 
    region: "south", 
    height: 250, 
    padding: 10, 
});

在searchResultsPanel我試着設置樣式爲overflow:auto;這就是設置autoScroll到true不反正但這並沒有改變任何東西。我也嘗試減小其中一個可解的Panel s的寬度，但這也沒有什麼區別。我想動態地改變可滾動Panel的風格時，摺疊Panel摺疊，但考慮到我總是可以滾動，我不認爲這將有所作爲，但糾正我，如果我錯了。

來源

2015-01-15 user1849060

如果你能提供一個[小提琴]（http://fiddle.sencha.com），這樣我們就可以稍微玩一下了。但否則..好帖子 – Scriptable 2015-01-15 15:57:53

我設法解決這個問題，但通過更改我原來的問題中沒有提供的代碼。我在可摺疊的Panel上設置了expand和collapse聽衆，因此當這些事件被觸發時，我手動設置了Panel組件的寬度（使用硬編碼值），而對於GridPanel，我額外設置了列的寬度GridPanel的ColumnModel。刪除這些代碼行後，摺疊並展開可摺疊Panel時，滾動條將保留。

來源

2015-01-17 11:10:17 user1849060

extjs 3.4面板崩潰時滾動條消失

回答

相關問題