2011-05-20 78 views
2

我無法在ExtJS中獲取組合框來顯示下拉項目。我最初使用XmlStore來動態加載數據,但爲了確保這不是問題,我使用了一個現有的ComboBox,它使用了一個簡單的ArrayStore(並且目前在我的應用程序中工作),以查看它是否工作,仍然沒有運氣。ExtJS組合框不顯示元素

當使用Chrome的開發者工具,當我點擊組合框元素,我得到ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined和什麼也不顯示的下拉菜單。

這裏是我的代碼:

EventForm = Ext.extend(Ext.form.FormPanel, { 
    constructor: function(config) { 
     config = Ext.apply({ 
      items: [ 
       { 
        layout: 'column', 
        xtype: 'container', 
        items: [ 
         { 
          layout: 'form', 
          xtype: 'container', 
          columnWidth: 0.5, 
          items: [ 
           { 
            fieldLabel: 'My Combo Box' 
            name: 'mycombobox', 
            xtype: 'combo', 
            store: new Ext.data.ArrayStore({ 
             fields: ['size'], 
             data: [ 
              ['50'], 
              ['100'], 
              ['150'], 
              ['200'] 
             ] 
            }), 
            displayField: 'size', 
            valueField: 'size', 
            forceSelection: true, 
            editable: false, 
            triggerAction: 'all', 
            mode: 'local', 
            listWidth: 60, 
            width: 60 
           } 
          ] 
         }, { 
          // another column here similar to above 
         } 
        ] 
       } 
      ] 
     }, config); 

     EventForm.superclass.constructor(config); 
    } 
}); 

回答

6

你是不是正確調用EventForm的超類的構造函數。更改您的構造函數的最後一行爲:

EventForm.superclass.constructor.call(this, config); 
+1

*劉海頭靠在辦公桌* - 謝謝你注意到我的愚蠢的錯誤:) – Jared 2011-05-23 18:12:36

1

data數組必須包含對象的列表,並且您可以通過fields提供的密鑰必須是你的數據是指那些對象的鍵。您data陣列正確的語法是:

data: [ 
    {'size':'50'}, 
    {'size':'100'}, 
    {'size':'150'}, 
    {'size':'200'} 
] 

(可能是因爲我沒有機會,現在驗證)

+0

我列出的ComboBox代碼實際上是從我的應用程序的另一部分,工作沒有問題。最後,我將使用一個XmlStore,但我想,以消除可與遠程加載的東西出現的錯誤,我會使用現有的組合框,在我的應用程序的另一部分工作。 – Jared 2011-05-20 14:49:55

+0

所有鍵相同的「大小」不會肯定工作...而{爲對象符號,數組是[] ...數組存儲大約需要這種格式:數據:[[「50」,「50」], [「100」,「100」]] – 2015-04-21 14:53:17