0

我正在使用 extjs 的 Fieldset，其中包含使用 extjs 的文本、按钮和下拉菜单。

我的字段集代码如下

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();
    }
});

但其他项目应该在文本字段和按钮下方。

请帮我解决这个问题？

4

3 回答 3

2

这只是布局问题。我在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'
        }
    ]
});
于 2013-10-07T09:19:30.453 回答
1

看看这个链接..希望这对你有帮助

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

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

于 2013-10-05T07:44:53.187 回答
0 
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
    });
于 2013-10-05T07:54:16.580 回答