0

extjsを使用したテキスト、ボタン、ドロップダウンを持つ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 に答える