Question

ExtJs组件添加问题

比如在项目中有两个js文件一个叫window.js放的是window窗体，form.js里面放的form窗体
现在在这两个文件独立的情况下怎么在window窗体中添加form窗体。

请写个简单的代码谢谢

Answer 1

1、在window里面动态加载form.js

Ext.require( String/Array expressions, [Function fn], [Object scope], [String/Array excludes] );

2、在window里面创建form实例

Ext.create( [String name], [Object... args] ) :

3、然后将创建好的实体放在window的items里面就可以了

就和下面这个差不多了：

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

Ext.onReady(function() {

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

    Ext.QuickTips.init();

    function showContactForm() {
        if (!win) {
            var form = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Your Name',
                    labelStyle: 'font-weight:bold;padding:0',
                    layout: 'hbox',
                    defaultType: 'textfield',

                    fieldDefaults: {
                        labelAlign: 'top'
                    },

                    items: [{
                        flex: 1,
                        name: 'firstName',
                        afterLabelTextTpl: required,
                        fieldLabel: 'First',
                        allowBlank: false
                    }, {
                        width: 30,
                        name: 'middleInitial',
                        fieldLabel: 'MI',
                        margins: '0 0 0 5'
                    }, {
                        flex: 2,
                        name: 'lastName',
                        afterLabelTextTpl: required,
                        fieldLabel: 'Last',
                        allowBlank: false,
                        margins: '0 0 0 5'
                    }]
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Your Email Address',
                    afterLabelTextTpl: required,
                    vtype: 'email',
                    allowBlank: false
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Subject',
                    afterLabelTextTpl: required,
                    allowBlank: false
                }, {
                    xtype: 'textareafield',
                    fieldLabel: 'Message',
                    labelAlign: 'top',
                    flex: 1,
                    margins: '0',
                    afterLabelTextTpl: required,
                    allowBlank: false
                }],

                buttons: [{
                    text: 'Cancel',
                    handler: function() {
                        this.up('form').getForm().reset();
                        this.up('window').hide();
                    }
                }, {
                    text: 'Send',
                    handler: function() {
                        if (this.up('form').getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            // this.up('form').getForm().submit();
                            this.up('form').getForm().reset();
                            this.up('window').hide();
                            Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                    }
                }]
            });

            win = Ext.widget('window', {
                title: 'Contact Us',
                closeAction: 'hide',
                width: 400,
                height: 400,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: form
            });
        }
        win.show();
    }

    var mainPanel = Ext.widget('panel', {
        renderTo: Ext.getBody(),
        title: 'Welcome!',
        width: 500,
        bodyPadding: 20,

        items: [{
            xtype: 'component',
            html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
                  'send us a message. We will respond to your inquiry as quickly as possible.',
            style: 'margin-bottom: 20px;'
        }, {
            xtype: 'container',
            style: 'text-align:center',
            items: [{
                xtype: 'button',
                cls: 'contactBtn',
                scale: 'large',
                text: 'Contact Us',
                handler: showContactForm
            }]
        }]
    });

});

追问

假如我在另外一个js文件里面定义了一个panel 怎么放到这个页面的window中？

追答

加入你定义的panel的类名叫做 Ext.ux.MyPanel;

Ext.Loader.setPath('Ext.ux','./js/');
Ext.require([
    'Ext.ux.MyPanel'
]);
Ext.onReady(function() {
var myPanel = Ext.create('Ext.ux.MyPanel',{
    title:'MyPanel'，
    html:'哈哈哈'
})
     var win = Ext.widget('window', {
                title: 'Contact Us',
                closeAction: 'hide',
                width: 400,
                height: 400,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: [myPanel]
            });
        }
       win.show();
 });

追问

兄弟伙 能加个好友么？ 417924273 这是我的

Answer 2

慢慢的添加