Grid Panel中的模態窗口 - extjs5

我在這裏有一些擔心，爲什麼模態窗口上的項目沒有顯示出來。這是代碼。Grid Panel中的模態窗口 - extjs5

Ext.require([ 
    'Ext.form.*', 
    'Ext.tip.QuickTipManager' 
]); 

Ext.onReady(function() { 
    Ext.QuickTips.init(); 

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; 

    var panel = Ext.create ('Ext.grid.Panel', { 
     renderTo : Ext.getBody(), 
     id: 'show_panel', 
     autoLoad: true, 
     // store : 
     // width : 900, 
     // height : 800, 
     title: 'Products in the Database', 

     dockedItems: [{ 
      xtype:'toolbar', 
      dock: 'top', 

      items: [ 
      { 
       xtype: 'label', 
       text: 'Search', 
       style: 'padding: 5px; text-align: left', 
       width: 50 
      }, 
      { 
       xtype: 'trigger', 
       triggerCls: Ext.baseCSSPrefix + 'form-search-trigger', 
       width: 500, 
       name: 'prod_search_key', 
       allowBlank: true, 
       style: 'margin-left: 5px' 
      }, 
      { 
       xtype: 'button', 
       text: 'Add Product', 
       handler: addProduct 
      }] 
     }, 
     { 
      xtype: 'pagingtoolbar', 
      // store: 
      dock: 'bottom', 
      displayInfo: true, 
      displayMsg: 'Dispaying products {0} - {1} of {2}', 
      emptyMsg: 'No products to display' 
     }], 

     columns: [ 
      { 
       text: 'Product SKU', 
       flex: 1, 
       sortable : true, 
       hideable: false, 
       dataIndex: 'prod_sku' 
      }, 
      { 
       text: 'Product Name', 
       flex: 1, 
       sortable: true, 
       hideable: false, 
       dataIndex: 'prod_name' 
      }, 
      { 
       text: 'Product Price', 
       flex: 1, 
       sortable: true, 
       hideable: false, 
       dataIndex: 'prod_price' 
      }, 
      { 
       text: 'Product Count', 
       flex: 1, 
       sortable: true, 
       hideable: false, 
       dataIndex: 'prod_count' 
      } 
     ] 
    }); 

    function addProduct() { 
     console.log ('HEHEHE'); 
     Ext.QuickTips.init(); 
     var addProductWindow; 

     if(!addProductWindow) { 
      var product_form = Ext.widget ('form', { 
       renderTo : Ext.getBody(), 
       id: 'prod_form_modal', 
       layout: 
       { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       border : false, 
       bodyPadding: 10, 
       fieldDefaults: 
       { 
        labelAlign : 'top', 
        labelWidth : 100, 
        labelStyle : 'font-weight:bold' 
       }, 
       defaults: 
       { 
        margins: '0 0 10 0' 
       }, 

       items: [{ 
        fieldLabel: 'Product SKU', 
        afterLabelTextTpl: required, 
        name: 'prod_sku', 
        allowBlank: false 
       },{ 
        fieldLabel: 'Product Name', 
        afterLabelTextTpl: required, 
        name: 'prod_name', 
        allowBlank: false 
       }, { 
        fieldLabel: 'Product Price', 
        afterLabelTextTpl: required, 
        name: 'prod_price', 
        allowBlank: false 
       }, { 
        fieldLabel: 'Product Count', 
        afterLabelTextTpl: required, 
        name: 'prod_count', 
        allowBlank: false 
       }], 
      }); 

      var addProductWindow = Ext.widget('window', { 
       title: 'Add a Product', 
       closeAction: 'close', 
       width: 500, 
       height: 200, 
       minHeight: 250, 
       layout: 'fit', 
       resizable: true, 
       modal: true, 
       items: product_form 
      }); 
     } 

     addProductWindow.show(); 
    } 
});

所以基本上有一個名爲面板的網格面板。

我做的是我創建了一個名爲product_form的窗體，以及一個名爲addProductWindow的窗口。並使用product_form作爲addProductWindow中的項目。添加每當我點擊添加產品按鈕模態將顯示字段。但它沒有，。

這是圖像