مسافة ثابتة بين عناصر زر الاختيار

Question

أنا جديد على ExtJs وأحتاج إلى مساعدتك، لأنني أواجه مشكلات في حلها بنفسي.في المشروع الذي أعمل عليه حاليًا، نستخدم أزرار الاختيار التالية، مثل:

{
xtype: 'radiogroup'
, fieldLabel: 'ROW Periodicity'
, name: 'rowPeriodicity'
, width: 700
, allowBlank: false
, vertical: false
, disabledCls: 'ux-item-disabled'
, items: [
    { name: 'rowPeriodicityCode' , boxLabel: '6 months' , inputValue: 'M6' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'Annual' , inputValue: 'Y1' }
    , { name: 'rowPeriodicityCode' , boxLabel: '3-Yearly' , inputValue: 'Y3' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'N/A' , inputValue: 'N_A' }
    , { name: 'rowPeriodicityCode' , boxLabel: 'Other' , inputValue: 'OTHER }
    ]    
}

عدد العناصر ليس ثابتا.

لذا، ما يحدث هو أن أزرار الاختيار تشغل كامل المساحة المتاحة وأن المسافة بين العناصر ليست ثابتة، وهذا هو الشكل الذي تبدو عليه بشكل أو بآخر

| x     x     x     x     x |
| x       x       x       x |       
| x           x           x |  

ما أود رؤيته هو مسافة ثابتة، مثل:

| x  x  x  x  x             |
| x  x  x  x                |       
| x  x  x                   |  

أي أفكار حول كيفية تحقيق ذلك؟

Answer 1

يمكنك استخدام ال columns التكوين:

يحدد عدد الأعمدة التي يجب استخدامها عند عرض عناصر التحكم في مربع الاختيار/الراديو المجمعة باستخدام التخطيط التلقائي.يمكن أن يستغرق هذا التكوين عدة أنواع من القيم:

• "Auto" - سيتم تقديم عناصر التحكم واحدة لكل عمود على صف واحد وسيتم توزيع عرض كل عمود بالتساوي بناءً على عرض حاوية الحقل الكلية.هذا هو الافتراضي.
• الرقم - إذا قمت بتحديد رقم (على سبيل المثال ، 3) سيتم إنشاء عدد الأعمدة وسيتم توزيع عناصر التحكم المحتوية تلقائيًا بناءً على قيمة الرأسية.
• Array - يمكنك أيضًا تحديد مجموعة من عرض الأعمدة ، وخلط عدد صحيح (العرض الثابت) وقيم تعويم (عرض النسبة المئوية) حسب الحاجة (على سبيل المثال ، [100 ، .25 ، .75]).سيتم تقديم أي قيم عدد صحيح أولاً ، ثم سيتم حساب أي قيم تعويم كنسبة مئوية من المساحة المتبقية.لا يتعين على قيم التعويم إضافة ما يصل إلى 1 (100 ٪) على الرغم من أنك إذا كنت تريد أن تأخذ عناصر التحكم حاوية الحقل بأكملها ، فيجب عليك القيام بذلك.

مثال: http://jsfiddle.net/9ZDsK/