1

チーム私はextjsパネルでのアイテムの配置に関して2つの問題に直面しています。私はextjsバージョン3.4を使用しています。

基本的に、パネルのテキストボックスを各行に2つずつ水平に配置したいのですが、現時点では1行に1つしか表示されません。

また、パネルと最初のテキストボックスの間にスペースがないようです。EXTJS 3.4でこれを行う方法はありますか？

コード：

<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: 'left',
            labelStyle: 'font-weight:bold;',
            labelWidth: 85,
            title: 'formname',
            bodyStyle:'padding:5px',
            scrollable:'true',
            border:'true',
            width: 1200,
            height:600,
            items: [{
                xtype:'panel',
                height:200,
                autoScroll:true,            
                defaults: {flex: 1, layout: 'form', border: false},
                layout:'hbox',
                items:[{
                title:'Personal Details',
                defaultType: 'textfield',   
                    items: [

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

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

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

    tab2.render(document.body); 


});
</script> 

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

1 に答える 1

1

IMO で最も簡単な方法はFormLayout、CSS を使用して配置を変更することです。の各フィールドはFormLayoutで囲まれているため、スタイルをdiv.x-form-item設定できます。float: leftフィールドの幅がパネルの幅に合わせて調整されている場合は、これで十分です。clear: leftそうしないと、2 番目のフィールドごとに設定する必要があります。

作業サンプル: http://jsfiddle.net/wC5hZ/2/

も使用できますTableLayoutが、より多くのコードになります。

于 2012-12-24T09:06:50.963 に答える