2011-03-20 15 views
23

का उपयोग कर शैलियों मैं रंग, फ़ॉन्ट आकार, पृष्ठभूमि, एक तत्व या ExtJS विजेट की आदि जैसे शैलियों कोड निम्न का उपयोग कर को बदलना चाहते हैं, लेकिन कोई भी काम करता है:कैसे स्थापित करने के लिए ExtJS

Ext.get('mydivid').setStyle({.......});  // does not work 
Ext.get('mydivid').applyStyle({.......}); // does not work 
Ext.select('mydivid').applyStyle({.......}); // does not work 
Ext.query('.myclass').applyStyle({.......}); // does not work 

और के लिए extJs विजेट मैंने Ext.getCmp का उपयोग करने का प्रयास किया।

क्या कोई जानता है कि extjS का उपयोग करके HTML तत्व और extJS विजेट की शैलियों को कैसे बदला जाए और सीएसएस नहीं?

उत्तर

33

एचटीएमएल डोम तत्वों की शैली बदलना काफी आसान है:

एचटीएमएल

<html> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 
     <div id="el1">Element 1</div> 
     <div class="el">Element [1]</div> 
     <div class="el">Element [2]</div> 
    </body> 
</html> 

जावास्क्रिप्ट

Ext.onReady(function() { 
    Ext.get('el1').setStyle('color', 'red'); 
    Ext.select('.el').setStyle('color', 'green'); 
}); 

Ext.query सीधे काम नहीं करेगा के रूप में यह एक सरल सरणी देता है डीओएम नोड्स पाए गए, इसलिए आपको रेजल पर लूप करना होगा शैलियों को लागू करने के लिए टी। तुमने वास्तव में क्या किया

स्टाइलिंग विजेट दुर्भाग्य से इतना आसान नहीं है। अधिकांश विगेट्स कुछ स्टाइलिंग गुण जैसे cls, ctCls, bodyCls या style प्रदान करते हैं लेकिन घटक को प्रस्तुत करते समय वे लागू होते हैं। प्रतिपादन के बाद विजेट की शैली को बदलने के लिए आपको ऊपर दिए गए तरीकों का उपयोग करके विजेट के डीओएम तत्वों को सीधे बदलना होगा।

+0

+1 आपके उत्तर के लिए धन्यवाद। क्या हम विगेट्स के लिए 'सेट स्टाइल' या 'लागू स्टाइल' का उपयोग नहीं कर सकते? – Sarfraz

+1

आप शैली को सीधे विजेट के लिए सेट नहीं कर सकते क्योंकि एक विजेट में शैली नहीं है। विजेट डीओएम नोड्स से बना है जो सीएसएस कक्षाओं को सौंपा गया है या विजेट की समग्र उपस्थिति बनाने के लिए स्टाइल एट्रिब्यूट सेट हैं। शैलियों में हेरफेर करने के लिए आपको विजेट बनाने वाले डीओएम नोड्स तक पहुंचना होगा और वहां शैलियों को लागू करना होगा। बेहतर दृष्टिकोण हमेशा सीएसएस वर्गों का उपयोग कर रहा है - डीओएम नोड्स पर 'सेट स्टाइल()' के साथ गड़बड़ करना वास्तव में एक चीज नहीं है जो आपको करना चाहिए। –

7

अपने प्रश्न में टाइपो त्रुटि है:

यह applyStyle लेकिन applyStyles नहीं है।

applyStyles Ext.Element की विधि है, तो आप इसे इस रूप में उपयोग कर सकते हैं:

var win = new Ext.Window({ 
     width: 200, 
     height: 200 
}); 
win.show(); 

win.body.applyStyles({ 
    'background-color':'red', 
    'border': '1px solid blue' 
}); 
3

निम्नलिखित विजेट पर संभव है (लेकिन केवल इससे पहले कि यह प्रदान की गई है, के बाद से style config संपत्ति दौरान लागू किया जाता प्रस्तुत करना):

Ext.define('Ext.Component', { 
    style: {}, 
    initComponent: function(config) { 
    this.callParent(config); 
    this.style['background-color'] = 'red'; 
    } 
}); 

यह उपयोगी है अगर आप कहें कि आप किसी अन्य कॉन्फ़िगरेशन सेटिंग के कुछ विशिष्ट मूल्य पर कार्य कर रहे हैं।

के रूप में बताया एक बार गाया आप समझाया Ext.Element की विधि setStyle() की पहुंच है:

component.getEl().setStyle(config); 

अंत में आप मांस के लिए सीधे जा सकते हैं, और समझाया DOM element का उपयोग:

component.getEl().dom.style.backgroundColor = 'red'; 
संबंधित मुद्दे