टूलबार उपस्थिति में extjs बटन

Question

अरे, मेरे पास वास्तव में एक छोटा सा प्रश्न है लेकिन कुछ ऐसा नहीं है जो मुझे लगता है।

जब मैं एक ExtJS उपकरण पट्टी में एक बटन रखते हैं, तो यह एक डिफ़ॉल्ट उपस्थिति (किसी भी विंडोज़ टूलबार विकल्प की तरह)

मैं कैसे यह एक रूप में एक बटन की तरह लग कर सकता हूँ के साथ प्रकट होता ??

Answer 1

इस पोस्ट को सेन्चा फोरम Toolbar Button Style. पर देखें इस पोस्ट को बटन के इस स्टाइल को उपयोगकर्ताओं के लिए काफी अनजान पाठ के रूप में भी मिला। सीएसएस की कुछ पंक्तियों के साथ आपके एक्स्टजेस सीएसएस मास्टर फाइल में जोड़ा गया है, आप अपने आवेदन के लिए वैश्विक रूप से इस उपस्थिति को बदल सकते हैं।

Answer 2

यह सुंदर इस के करीब है: ExtJS Button Style Toolbar

जवाब मैं के लिए है कि प्रश्न में पाया गया था देख रहा था:

बटन के config को

ctCls: 'x-btn-over' 

जोड़ा जा रहा है बनाता है यह वास्तव में एक की तरह लग रहे बटन। यह एक हैक की तरह है क्योंकि यह अनिवार्य रूप से टूलबार बटन को स्टाइल कर रहा है जैसे दिख रहा है, लेकिन मेरे मामले में मैंने फैसला किया कि यह काफी अच्छा था।

संपादित करें: मैंने संस्करण 3 के बाद से एक्स्टजेस को छुआ नहीं है, इसलिए ऐसा लगता है कि यह अब काम नहीं करता है।

Answer 3

इस तरह का प्रयास करें:

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

यहाँ मेरी समाधान है (यह ExtJS के लिए काम करता 3.3.3):

बटन के लिए अतिरिक्त वर्ग जोड़ने के लिए, मैं इसे के रूप में 'एक्स-उपकरण पट्टी-grey- नामित btn ': अतिरिक्त वर्ग के लिए

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

शैलियाँ, अलग सीएसएस फ़ाइल में:

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

क्योंकि अतिरिक्त बटन छवियां '/ext-3.3.3/resources/images/default/button/btn.gif' में रखी गई हैं, इसलिए मैंने केवल पृष्ठभूमि-स्थिति संपत्ति बदल दी है। यह देशी बटन की तरह दिखता है।

Answer 5

आप एक पैनल में लपेट के लिए है, यहाँ ExtJS 4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}