Question

我正在使用带有文本，按钮和使用extjs下拉列表的extjs的字段集。

我的fieldset代码如下

ds=Ext.create('Ext.form.FieldSet', {
    title: 'System Input',
    width:500,
    style: {
        marginLeft: '5px',
        marginTop:'10px'
    },
    labelWidth: 75,
    items :[{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
});

现在我在这个字段集中有文本字段（即roofarea）和按钮（ieclss），我想在旁边的文本字段后面按钮，我的代码如下，但按钮恰好在文本字段下面：

roofarea = Ext.create('Ext.form.field.Text', {
    width: 300,
    autoScroll :true,
    labelWidth: 160,
    style: {
            marginLeft:'10px',
        marginTop: '10px',
        marginBottom:'10px'
    },
    fieldLabel: 'Total Roof Area(Sq. Meter):',
    readOnly: true,


value:faread
});  



var clss =Ext.create('Ext.Button', {
    text: 'Close',
    width:15,
    handler: function() {
        smWindow.hide();
    }
});

但其他项目应该是文本字段和按钮。

请帮帮我吗？

Answer 1

这只是一个布局问题。我在 hbox 布局和此字段集（closeFieldSet）中添加了文本字段和按钮，我添加到 ds 。

以下是代码段：

roofarea = Ext.create('Ext.form.field.Text', {
    width: 300,
    autoScroll: true,
    labelWidth: 160,
    style: {
        marginLeft: '10px',
        marginTop: '10px',
        marginBottom:'10px'
    },
    fieldLabel: 'Total Roof Area(Sq. Meter):',
    readOnly: true,
    value: 20
});

var clss = Ext.create('Ext.Button', {
    text: 'X',
    width: 50,
    style: {
        marginTop: '10px'
    },
    handler: function() {
        smWindow.hide();
    } 
});

var closeFieldSet = Ext.create('Ext.form.FieldSet', {
    title: 'System ',
    layout: 'hbox',
    width: 500,
    labelWidth: 75,
    items: [roofarea,clss]
});

var ds = Ext.create('Ext.form.FieldSet', {
    title: 'System Input',
    width:500,
    style: {
        marginLeft: '5px',
        marginTop:'10px'
    },
    labelWidth: 75,
   // items: [{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
    items: [
        closeFieldSet,
        {
            xtype: 'displayfield',
            value: 'Modify the inputs below to run another simulation'
        }
    ]
});

Answer 2

看一下这个链接..希望这有助于你

http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox

http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.CompositeField

Answer 3

sample code here
    this.form= new Ext.FormPanel({ 
        title:'New Developer', 
        renderTo: 'frame', 
        defaults:{xtype:'textfield'},
        bodyStyle:'padding: 10px',           
        items:[ 
            name,
            { 
                fieldLabel:'Email', 
                name:'txt-email', 
                value:'default@quizzpot.com', 
                id:"id-email" 
            },{ 
                xtype: 'checkbox', 
                fieldLabel: 'Active',
                name: 'chk-active',
                id: 'id-active'
            }, 
            { 
                    xtype:'hidden',
                    name:'h-type', 
                    value:'developer'
            } 
        ], 
        buttons:[{text:'Save'},{text:'Cancel'}] //<-- button of the form
    });

如何在textfield之后放置按钮

3 个答案: