ExtJS learning -------- learning operation style methods in Ext. Element (example)

ExtJS learning -------- learning operation style methods in Ext. Element (example)

Specific instance:

For other methods, see the help documentation, Documentation: http://download.csdn.net/detail/z1137730824/7748893
<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + PHByZSBjbGFzcz0 = "brush: java;"> Ext. onReady (function () {Ext. create ('ext. panel. panel ', {title: 'My panel', width: '000000', height: 100%, renderTo: Ext. getBody (), html: 'content of sp, content of d2 '// html:' content of sp, content of d2 '}); // The most common query method: // Ext. dom. element get fly getDomvar d1 = Ext. get ('d1 '); // obtain the element var sp = Ext. get ('SP '); // Method for operating the style system: // 1: addCls: Add CSS styles to elements. Duplicate styles are automatically filtered. // sp. addCls ('red'); // result: the content of the sp is set to the following style, and the content is changed to red/** Add a style to the JSP file: * // 2: applyStyles: sets the style attribute of the element. // sp. applyStyles ('backgroundcolor: Blue'); // result: the background is set to blue. // sp. applyStyles ({backgroundColor: 'yellow'}); // result: the background is set to yellow. // method 3: Write a function and return the preceding two types of settings. // 3: setStyle: Set the style format to 'key' and 'value' for the element. // sp. setStyle ('backgroundcolor', 'green'); // set the background color // sp. setStyle ('fontsize', '40px '); // set the font // 4: getStyle: returns the current style and calculated style of the element. // alert (sp. getStyle ('fontsize'); // result: the sp font style is returned. // alert (Ext. encode (sp. getStyle (['font Size ', 'backgroundcolor']);/** Method Introduction * getStyle (String/String [] property, [Boolean inline]): string/Object * Returns a named style property based on computed/currentStyle (primary) * and inline-style if primary is not available. * // 5: getStyleSize: returns the style size of the element. // alert (Ext. encode (sp. getStyleSize (); // result: the width and height of the sp are returned. // 6: setOpacity: Set opacity // var d2 = Ext. get ('d2 '); // operation DIV // d2.setStyle ('backgroundcolor ', 'Red'); // set the background // d2.setStyle ('width', '200px '); // set the height and width of the Div // d2.setStyle ('height ', '200px '); // d2.setOpacity (0.3); // 0 ~ 1. Set opacity in the range of 0-1. // 7: addClsOnClick: Add a style. When you click this element, // var d2 = Ext. get ('d2 '); // d2.addClsOnClick ('red'); // The style is displayed when the mouse clicks inside the Div and the style is red in this example, restore after release/** Add a style to the JSP file: * // 8: addClsOnOver: Add a style. When you move the mouse over an element, // var d2 = Ext. get ('d2 '); // d2.addClsOnOver ('red'); // result: When you move the cursor over the Div, the style will be changed. Remove and restore. // 9: getMargin: the returned value is an object with the top, left, right, and bottom attributes. The attribute value is the response element's margin value. // Var d2 = Ext. get ('d2 '); // alert (d2.getMargin (' B '); // r l t B returns the value of margin // alert (Ext. encode (d2.getMargin (); // Returns an Object/** API reference * getMargin ([String sides]): object/Number * Returns an Object with properties top, left, right and bottom * representing the margins of this element unless sides is passed, * then it returns the calculated width of the sides (see getPadding) * Parameters * sides: String (optional) * Any combination of l, r, t, B to get the sum of those sides * Returns * Object/Number * // 10: removeCls: delete the style of an element // var d2 = Ext. get ('d2 '); // d2.addCls ('red'); // String/String [] className String or String array // d2.removeCls ('red '); // String/String [] className String or String array // result: the style is cleared });
For specific experiment results, you can cancel the annotation and then perform the experiment...