extjs में बटन के आइकन आकार को सही तरीके से सेट कैसे करें?

Question

मैं extjs4 का उपयोग कर रहा हूं और जो मैं करने की कोशिश कर रहा हूं वह सरल लगता है लेकिन मुझे इसके लिए एक समाधान समाधान नहीं मिल रहा है।

मैं एक 64 * 64px आइकन है और मैं अपने बटन पृष्ठभूमि छवि के रूप में यह दिखाना चाहते हैं लेकिन ExtJS केवल एक समाधान के लिए नेट पर छवि आंशिक रूप से .Googled से पता चलता है, लेकिन कोई भी एक काम कर सुझाव इसके लिए समाधान। मैं बस अपनी पृष्ठभूमि छवि को अपने बटन पर फिट करना चाहता हूं।

.x-btn-icon .startbutton { 
    background-image: url(start.png) !important; 
} 

मैं कुछ सीएसएस संयोजन और अभी भी कोई सफलता की कोशिश की:

{ 
    xtype : 'button', 
    text : null, 
    iconCls : 'startbutton', 
    //icon:'./assets/icons/startbtn.png', 
    //style:{height:'60px'}, 
    width : 64, 
    height : 64 
} 

यहाँ मेरी सीएसएस कोड है:

यहाँ मेरी जे एस कोड है।

Answer 1

iconCls बटन तत्व में परिणाम, बटन के आइकन के सख्ती से संदर्भित करता है कि आप चित्र पूरे बटन कवर करने के लिए आप एक सीएसएस के लिए पृष्ठभूमि जोड़ना चाहिए चाहते हैं वर्ग में बटन जोड़ा गया।

{ 
    xtype: 'button', 
    width: 64, 
    height: 64, 
    text: 'some text', 
    cls: 'startbutton' 
} 

और सीएसएस

.startbutton { 
    background-image: url(start.png) !important; 
} 

Answer 2

इस हालांकि सीधे मदद नहीं करेगा अगर आप कर रहे हैं छवि 64px उच्च/विस्तृत, निम्नलिखित config 'पैमाने' विकल्प एक बटन के आकार को समायोजित करने के लिए इस्तेमाल किया जा सकता है:

• 'छोटे' - परिणाम बटन तत्व में 16px उच्च है।

• 'मध्यम' - बटन तत्व में परिणाम 24px उच्च है।

• 'बड़े' - जा रहा है 32px उच्च

Answer 3

मैं ExtJS 3.4.0 का उपयोग कर रहा है और अगर यह किसी भी 4.x में आसान है मुझे नहीं पता, लेकिन मैं तो उम्मीद है!

मैं इस मुद्दे छोटे/मध्यम/बड़ा है, तो बटन specifing पर के अलावा नया बटन शैलियों बनाने समाधान कर लिया है: वाला उपयोग

{ text: 'Read Data', 
    scale: 'extra', 
    iconAlign: 'left', 
    iconCls:'read_icon'} 

सीएसएस कोड प्रत्येक पक्ष के लिए निर्दिष्ट किया जाना चाहिए आप कर रहे हैं आइकन, में मेरा मामला मैंने अभी बाईं तरफ परिभाषित किया है, लेकिन आपको प्रत्येक तरफ ऊपर/नीचे/दाएं/बाएं के लिए क्लोन करना होगा। आप ext-all.css अंदर सभी मूल कोड प्राप्त कर सकते हैं, यहाँ क्या मैं एक 64x64 आइकन

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{ 
    background-position: 0 center; 
    background-repeat: no-repeat; 
    padding-left:66px; 
    height:64px; 
} 

आप कोड सभी 'extra' आकार बटन के लिए में फिर से उपयोग कर सकते हैं के लिए उपयोग कर रहा हूँ है आपके प्रोजेक्ट और आप जितना चाहें उतना जोड़ सकते हैं

Answer 4

मेरे पास स्वीकृत उत्तर के साथ एक महत्वपूर्ण समस्या थी। बटन टेक्स्ट (नीचे चित्र में बाएं बटन) गलत स्थिति (आइकन के पीछे) में दिखाई दिया - स्थिति को डिफ़ॉल्ट स्केल का उपयोग करने के लिए कॉन्फ़िगर किया गया था।

आदेश में एक अन्य से भी डिफ़ॉल्ट आइकन आकार का उपयोग करें और सही स्थिति में टेक्स्ट रखने में, मेरा समाधान अधिभावी कोर शैलियों के बिना, काफी सरल था ।

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

बटन परिभाषा

xtype:'button', 
iconCls:'contactIcon80', 
iconAlign:'top', 
width:120, 
height:100, 
html:'<span class="bigBtn">Damn you hayate</span>' 

बटन iconCls

.contactIcon80 { 
    background-image: url(../images/calendar80.png) !important; 
    width:80px!important; 
    height:80px!important; 
    margin-right: auto !important; 
    margin-left: auto !important; 
} 

स्पैन वर्ग

.bigBtn { 
    position: absolute; 
    bottom: 4px !important; 
    left: 0% !important; 
    text-align: center !important; 
    width: 120px !important; 
} 

के

:

इस कोड (आईई, फ़ायरफ़ॉक्स पर परीक्षण किया, क्रोम) है कोर्स यह आइकन शीर्ष पाठ नीचे के लिए है। आप अन्य लेआउट