Symfony 网格面板内的模态窗口-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();
    }
});

Ext.require([
“Ext.form.*”，
“Ext.tip.QuickTipManager”
]);
Ext.onReady（函数（）{
Ext.QuickTips.init（）；
所需变量=“*”；
var panel=Ext.create（'Ext.grid.panel'{
renderTo:Ext.getBody（），
id:“显示面板”，
自动加载：对，
//商店：
//宽度：900，
//身高：800，
标题：“数据库中的产品”，
摘要：[{
xtype:“工具栏”，
码头：“顶部”，
项目：[
{
xtype:'标签'，
文本：“搜索”，
样式：“填充：5px；文本对齐：左”，
宽度：50
},
{
xtype:'触发器'，
triggerCls:Ext.baseCSSPrefix+“表单搜索触发器”，
宽度：500，
名称：'prod\u search\u key'，
allowBlank：是的，
样式：“左边距：5px”
},
{
xtype:'按钮'，
文本：“添加产品”，
处理程序：addProduct
}]
},
{
xtype:“pagingtoolbar”，
//商店：
船坞：“底部”，
displayInfo:true，
displayMsg:'Dispaying products{0}-{1}（共{2}'，
emptyMsg:“没有要显示的产品”
}],
栏目：[
{
文本：“产品SKU”，
弹性：1，
可排序：是的，
可隐藏的：错误，
数据索引：“产品库存单位”
},
{
文本：“产品名称”，
弹性：1，
可排序：是的，
可隐藏的：错误，
数据索引：“产品名称”
},
{
文字：“产品价格”，
弹性：1，
可排序：是的，
可隐藏的：错误，
数据索引：“产品价格”
},
{
文本：“产品计数”，
弹性：1，
可排序：是的，
可隐藏的：错误，
数据索引：“产品计数”
}
]
});
函数addProduct（）{
console.log（'HEHEHE'）；
Ext.QuickTips.init（）；
var-addProductWindow；
如果（！addProductWindow）{
var product_form=Ext.widget（'form'{
renderTo:Ext.getBody（），
id:“产品形式模式”，
布局：
{
键入：“vbox”，
对齐：“拉伸”
},
边界：错，
车身衬垫：10，
字段默认值：
{
labelAlign:“顶部”，
标签宽度：100，
标签样式：“字体大小：粗体”
},
默认值：
{
边距：“0 10 0”
},
项目：[{
fieldLabel:“产品SKU”，
afterLabelTextTpl：必需，
名称：'prod_sku'，
allowBlank:false
},{
fieldLabel:“产品名称”，
afterLabelTextTpl：必需，
名称：“产品名称”，
allowBlank:false
}, {
fieldLabel:“产品价格”，
afterLabelTextTpl：必需，
名称：“产品价格”，
allowBlank:false
}, {
fieldLabel:“产品计数”，
afterLabelTextTpl：必需，
名称：“产品计数”，
allowBlank:false
}],
});
var addProductWindow=Ext.widget（'窗口'{
标题：“添加产品”，
closeAction:“close”，
宽度：500，
身高：200，
身高：250，
布局：“适合”，
可调整大小：正确，
莫代尔：是的，
项目：产品表格
});
}
addProductWindow.show（）；
}
});

所以基本上有一个叫做panel的网格面板

我所做的是创建了一个名为product\u form的表单和一个名为addProductWindow的窗口。并将product_表单用作addProductWindow中的项目。添加每当我单击添加产品按钮时，模式将显示字段。但事实并非如此

这就是图像

---

谢谢

您的表单已正确添加到窗口中。但是它不包含任何字段，因为

表单

具有

defaultType:“panel”

并且您没有为字段定义任何

xtype

。事实上，表单面板中有四个面板，因为这些面板既没有标题也没有项目，所以只能看到空白

请尝试向表单中添加：

defaultType:'textfield',