网格面板内的模式 Window - extjs5

Question

我有点担心，为什么模态 window 上的项目没有显示。这是代码。

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();
    }
});

所以基本上有一个名为 panel 的网格面板。

我所做的是创建了一个名为 product_form 的表单和一个名为 addProductWindow 的 window。并使用 product_form 作为 addProductWindow 中的项目。每当我单击“添加产品”按钮时添加，模态将与字段一起显示。但事实并非如此。

这是图片

谢谢！

Answer 1

您的表单已正确添加到 window。但是它不包含任何字段，因为 form 有 defaultType: 'panel' 而您没有为您的字段定义任何 xtype。所以实际上您的表单面板中有四个面板，并且由于这些面板既没有标题也没有项目，您只能看到白色 space.

请尝试添加到表格中：

defaultType:'textfield',

网格面板内的模式 Window - extjs5

Modal Window inside a Grid Panel - extjs5

extjs

symfony

extjs5