在 extJS 中放置一个文本框

Question

我有一个面板，单击它会显示一棵树和一个文本框。但问题是它在树的正下方显示文本框。树和文本框是两个不同的功能，点击它们会被背靠背调用。

我希望文本框显示在树的右侧。

我该怎么做？

文本框的代码-

function textBoxTab(textBoxSubTab){
    var simple = new Ext.form.Panel({
        labelWidth: 75,
        frame:true,
        title: textBoxSubTab,
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
        items: [
            {
                xtype: 'textfield',
                name : 'tab',
                hidden: true,
                fieldLabel : textBoxSubTab,
                value:textBoxSubTab

            },
            {
            xtype: 'textfield',
            name: 'moduleId',
            fieldLabel: 'Module_id',
            allowBlank: false , // requires a non-empty value
            maskRe: /[0-9.]/

        }, {
            xtype: 'textfield',
            name: 'moduleDesc',
            fieldLabel: 'Module_desc',
            allowBlank: false  // requires a non-empty value
        }
        ],
        buttons:[
            {
                text: 'Cancel',
                handler: function () {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                handler: function () {

                    var form = this.up('form').getForm();

                    form.submit({
                        clientValidation: true,
                        url:"saveForm.htm",
                        success: function(form, action) {
                            Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                    if (form.isValid()) {
                        //Ext.Msg.alert('Submitted Values', form.getValues(true));
                        this.up('form').getForm().submit();
                    }
                }
            }]
    });

    document.body.innerHTML = '';
    mainPanel();
    panelAdmin();
    simple.render(document.body);

}

Answer 1

您只需将边距添加到您的面板

var simple = new Ext.form.Panel({
    labelWidth: 75,
    frame:true,
    title: textBoxSubTab,
    width: 350,
    *margin : 'up down right left'*
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [
        {
            xtype: 'textfield',
            name : 'tab',
            hidden: true,
            fieldLabel : textBoxSubTab,
            value:textBoxSubTab

        },
        {
        xtype: 'textfield',
        name: 'moduleId',
        fieldLabel: 'Module_id',
        allowBlank: false , // requires a non-empty value
        maskRe: /[0-9.]/

    }, {
        xtype: 'textfield',
        name: 'moduleDesc',
        fieldLabel: 'Module_desc',
        allowBlank: false  // requires a non-empty value
    }
    ],
    buttons:[
        {
            text: 'Cancel',
            handler: function () {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            handler: function () {

                var form = this.up('form').getForm();

                form.submit({
                    clientValidation: true,
                    url:"saveForm.htm",
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
                if (form.isValid()) {
                    //Ext.Msg.alert('Submitted Values', form.getValues(true));
                    this.up('form').getForm().submit();
                }
            }
        }]
});

Answer 2

正如@RobSchmuecker 在评论中提到的，我们可以使用 "floating" 属性来完成所需的 . 您可以在这里找到详细的答案。

extjs 3.3: floating panel

在 extJS 中放置一个文本框

Placing a textbox in extJS

textbox

extjs