Question

我在这里有一些担心，为什么模态窗口上的项目没有显示出来。这是代码。

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的窗口。并将product_form用作addProductWindow中的项目。每当我点击添加产品按钮时，添加模式将显示字段。但它没有。

这是图像

谢谢！

Answer 1

您的表单已正确添加到窗口中。但它不包含任何字段，因为form具有defaultType: 'panel'，并且您没有为您的字段定义任何xtype。事实上，你的表单面板中有四个面板，由于这些面板既没有标题也没有项目，你只能看到空格。

请尝试添加到表单中：

defaultType:'textfield',

网格面板内的模态窗口 - extjs5

1 个答案: