बाएं, मध्य, दाएं

Question

पर टूलबार में तत्वों को संरेखित कैसे करें I टूलबार के भीतर तीन क्षेत्रों को कैसे छोड़ दिया जा सकता है? मुझे पता है कि मैं निम्नलिखित सभी वस्तुओं के लिए सही गठबंधन कंटेनर ट्रिगर करने के लिए -> का उपयोग कर सकता हूं लेकिन केंद्र के बारे में क्या?

Answer 1

आप एक चाल के साथ इस संग्रह कर सकते हैं:

Ext.create('Ext.panel.Panel', { 
    title: 'Toolbar Fill Example', 
    width: 300, 
    height: 200, 
    tbar : [ 
     'Item 1', 
     { xtype: 'tbfill' }, 
     'Item 4', 
     { xtype: 'tbfill' }, 
     'Item 2' 
    ], 
    renderTo: Ext.getBody() 
}); 

JSFiddle

ध्यान दें कि:

[ 
    'Item 1', 
    '->', 
    'Item 4', 
    '->', 
    'Item 2' 
] 

सभी एक ही काम कर रहा है।

यह कैसे

-> काम करते हैं या यह xtype tbfill है एक flex: 1 विन्यास के साथ एक खाली घटक से ज्यादा कुछ नहीं है।

Answer 2

dockedItems: [{ xtype: 'उपकरण पट्टी', buttonAlign: 'केंद्र', गोदी: 'शीर्ष', आइटम: [{ पाठ: } 'शीर्ष करने के लिए डॉक'] }]

Answer 3

Ext.create('Ext.panel.Panel', { 
    title: 'Toolbar Fill Example', 
    width: 300, 
    height: 200, 
    tbarCfg:{ 
      buttonAlign:'center' //for center align 
     // buttonAlign:'left' //for left align 
     // buttonAlign:'right' //for right align 
    }, 
    tbar : [ 
     'Item 1', 
     { xtype: 'tbfill' }, 
     'Item 4', 
     { xtype: 'tbfill' }, 
     'Item 2' 
    ], 
    renderTo: Ext.getBody() 
}); 

Answer 4

For Right:  
bbar: ['->',{ 
        xtype: 'button', 
        text: 'xyz', 

       }] 

For Left:  
bbar: ['<-',{ 
        xtype: 'button', 
        text: 'xyz', 

       }]