0

ExtJS で Hbox と Vbox を使用して簡単なレイアウトを開発しようとしています。しかし、2 つのボックス (スナップショットの [関係] ボックスと [略語] ボックスを参照) では、境界線がランダムに表示されません。理由がわかりません。可能であれば、私を助けてください。スクリーン ショットとコード スナップをここに示します。

スクリーンショット

ここに画像の説明を入力

コード

Ext.define('EzRE.view.Viewport', {
extend : 'Ext.container.Viewport',
requires : ['EzRE.view.DashBoard'],
getOneSectionLayout:function(title,isFirst){
    var margin = null;
    if(isFirst)
    {
        margin = "10px 10px 10px 10px";
    }
    else
    {
        margin = "10px 10px 10px 0px";
    }
    return{
        xtype:'panel',
        height:'100%',
        flex:1,
        style:{
            "margin":margin
        },
        title:title
    };
},
getMainLayout:function(title,items){
    return{
        xtype:'panel',
        flex:1,
        width:'100%',
        title:title,
        border:false,
        layout:{
            type:'hbox',
            align:'middle',
            pack:'center'
        },
        items:items
    };
},
initComponent:function(){

        this.layout={
                type:'vbox'
        };

        var NLP_SEC_ITEMS = [this.getOneSectionLayout('Section Header',true),
                           this.getOneSectionLayout('Abbrivation',false),
                           this.getOneSectionLayout('Nagation',false),
                           this.getOneSectionLayout('Head Rule',false),
                           this.getOneSectionLayout('Relationship',false),
                           this.getOneSectionLayout('Overlap',false)];

        var KNOWLEDGE_SEC_ITEMS = [this.getOneSectionLayout('Precision Analysis',true),
                           this.getOneSectionLayout('Recall Analysis W/O Annotation',false),
                           this.getOneSectionLayout('Recall Analysis With Annotation',false)];

        var CODE_SEC_ITEMS = [this.getOneSectionLayout('Code Rule Engine',true),
                           this.getOneSectionLayout('Code DRG Analysis',false),
                           this.getOneSectionLayout('Code Associan Analysis',false)];

        this.items = [this.getMainLayout('NLP', NLP_SEC_ITEMS),
                      this.getMainLayout('Knowledge', KNOWLEDGE_SEC_ITEMS),
                      this.getMainLayout('Code', CODE_SEC_ITEMS)];

        this.callParent(arguments);
}

});

4

0 に答える 0