1

チーム、

フォームパネル内のテキストボックスを揃えることができないという1つの問題に直面しています。基本的に内側のパネルの内側に2列のレイアウトが必要です

基本的に私は1つのフォームパネルを作成しており、その中にさらに3つのパネルを作成することを計画していますが、テキストボックスは常に改行されています。

以下のコード。

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">

    Ext.onReady(function(){
        var tab2 = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'formname',
            bodyStyle:'padding:5px',
            width: 1200,
            height:600,
            items: [{
                xtype:'panel',
                plain:true,
                border:false,
                activeTab: 0,
                height:50,
                autoScroll:true,
                items:[{
                title:'Personal Details',
                defaults: {width: 230},
                layout:'form',
                defaultType: 'textfield',
                    items: [

                        {
                            fieldLabel: 'First Name',
                            name: 'first',
                            allowBlank:false,
                            value: 'Jack'
                        },{
                            fieldLabel: 'Last Name',
                            name: 'last',
                            value: 'Slocum',

                        },{ 
                            xtype:'combo',
                            fieldLabel: 'Company',
                            name: 'company',
                            value: 'Ext JS'
                        }, {
                            fieldLabel: 'Email',
                            name: 'email',
                            vtype:'email'
                        }]

                }]
                }],
            buttons: [{
            text: 'Save'
            },{
            text: 'Cancel'
            }]
        });

    tab2.render(document.body); 


});
</script> 

</div>
</body>
</html>
4

2 に答える 2

1

これは、ExtJS 3.4 を使用した TabPanel 内で機能しています。

// p is the tabPanel
t = p.add ({
    xtype: 'form',
    layout: 'column',
    items: [
        {
            xtype:'container',
            columnWidth: .5,
            frame: false,
            items: new Ext.Panel ({
                frame: false,
                bodyCssClass: 'x-panel-mc',
                bodyStyle: 'background-color: white',
                layout: 'form',
                items: formPart
            }),
        }, {
            xtype:'container',
            columnWidth: .5,
            items: buttonPart,
        }
    ],
});
于 2016-02-24T08:29:55.990 に答える
1

ExtJS 4 では、フォーム レイアウトを使用してフィールド ラベルを管理する必要はありません。すべてのレイアウト コンテナを使用して、フォーム内のフィールドをレイアウトできます ( http://docs.sencha.com/ext-js/4-を確認してください)。 0/#!/ガイド/アップグレード)。したがって、FormPanel に列レイアウトを使用してから、目的の列を管理するための vbox レイアウトを持つ 2 つのサブコンテナーを追加してみてください。

new Ext.FormPanel({
        layout: 'column',
        items: [
        {
           xtype:'container',
           columnWidth: .5,
           layout: 'vbox',
           items: [
           put here left column items
           ]
        },
        {
           xtype:'container',
           layout: 'vbox',
           columnWidth: .5,
           items: [
           put here right column items
           ]
        }
    });
于 2012-12-21T16:20:08.940 に答える