كيفية الحصول على ارتفاع ext.panel لملء منطقة الوالدين

Question

لدي ext.tabpanel التالي:

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    //layout: 'fit', // makes component disappear
    viewConfig: {
        forceFit:  true //has no effect
    },
    // height: auto, //error "auto isn't recognized"
    items:[{
            title: 'Section 1',
            html: 'test'
        },{
            title: 'Section 2',
            html: 'test'
        },{
            title: 'Section 3',
            html: 'test'
        }]
});

الذي يشبه هذا:

كيف يمكنني الحصول على الخط في الوسط لتمتد إلى الأسفل بحيث يملأ مساحته الأم عموديًا؟

إليك كيفية تحميل tabpanel regionContent:

regionContent = new Ext.Panel({
    id: 'contentArea',
    region: 'center',
    autoScroll: true
});


function clearExtjsComponent(cmp) {
    var f;
    while(f = cmp.items.first()){
        cmp.remove(f, true);
    }
}

function replaceComponentContent(cmpParent, cmpContent) {
    clearExtjsComponent(cmpParent);
    cmpParent.add(cmpContent);
    cmpParent.doLayout();
}

replaceComponentContent(regionContent, modules_info_panel);

أرى أن الارتفاع لهذا العنصر في DOM هو المطلق (19 بكسل) ، أين يتم تعيين ذلك؟

إضافة

ماكستيرتش ، جربت فكرتك عن طريق وضع layout: 'fit' في علامات التبويب نفسها ولكن الخط لا يزال في نفس المكان:

var modules_info_panel = new Ext.TabPanel({
    activeTab: 0,
    defaults:{autoScroll:true},
    items:[{
            title: 'Section 1',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 2',
            layout: 'fit',
            html: 'test'
        },{
            title: 'Section 3',
            layout: 'fit',
            html: 'test'
        }]
});

Answer 1

تصحيح:

آسف إدوارد كنت غير صحيح ، تريد layout: 'fit' داخل الخاص بك منطقة المنطقة لوحة. تغييرات الكود المحدثة أدناه.

فكرتك الأولية في الاستخدام layout: 'fit' صحيح ، ولكن لديك في الموقع الخطأ. تريد ما يلي:

var regionContent = new Ext.Panel({
   region     : 'center',
   autoScroll : true,
   layout     : 'fit', // added this line
   items      : []
});

Answer 2

يبدو أنك داخل تخطيط حدودي ، كيف تحدد اللوحة التي تحدد التصميم الحدودي؟ يجب أن تملأ المنطقة المركزية للتخطيط الحدودي عادة المساحة التي لم تظل المناطق الأخرى. فعلت عينة تشبه تخطيطك: http://jsbin.com/ikazo3/6/edit

من تخطيط الحدود توثيق:

• يجب أن تحتوي أي حاوية باستخدام BorderLayout على عنصر طفل مع المنطقة: "المركز". سيتم دائمًا تغيير حجم العنصر الفردي في منطقة الوسط لملء المساحة المتبقية التي لا تستخدمها المناطق الأخرى في التصميم.
• يجب أن يكون للعرض من أي طفل مع منطقة من الغرب أو الشرق عرضًا (عدد صحيح يمثل عدد البكسلات التي يجب أن تأخذها المنطقة).
• يجب أن يكون لدى أي طفل مع منطقة من الشمال أو الجنوب ارتفاع.
• يتم إصلاح مناطق الحدود في وقت العرض وبعد ذلك ، قد لا تتم إزالة أو إضافة مكوناتها الفرعية. لإضافة/إزالة المكونات داخل الحدود ، اجعلها ملفوفة بواسطة حاوية إضافية تتم إدارتها مباشرة بواسطة BorderLayout. إذا كانت المنطقة قابلة للطي ، فيجب أن تكون الحاوية المستخدمة مباشرة من قبل مدير BorderLayout لوحة. في المثال التالي ، تتم إضافة حاوية (ext.panel) إلى المنطقة الغربية: