Menu
I wanted to change the styles like color, font size, background, etc of an element or extJS widget using following code but none works:
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 And for extJs widget I tried using Ext.getCmp.
Does anyone know how to change the styles of an html element and extJS widget using extJS and not CSS?
489
Application Styling refers to user adjustment of the look and feel of the components. These adjustments may include: color, color gradients, font, margins/padding, etc. Ext JS 6 has a new way of styling the application. It uses SCSS for styling.
Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such as IE6+, FF, Chrome, Safari 6+, Opera 12+, etc.
cls: This is applied to the component's root element. Quoting from the docs: An optional extra CSS class that will be added to this component's Element. This can be useful for adding customized styles to the component or any of its children using standard CSS rules.
Changing the style of HTML DOM elements is quite easy:
HTML
<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> Javascript
Ext.onReady(function() { Ext.get('el1').setStyle('color', 'red'); Ext.select('.el').setStyle('color', 'green'); }); Ext.query will not work directly as it returns a simple array of found DOM nodes, so you'd have to loop over the result to apply styles. What did you do exactly?
Styling widgets is not that easy unfortunately. Most widgets provide some styling attributes such as cls, ctCls, bodyCls or style but they are applied when rendering the component. To change the style of widgets after rendering you must change the widget's DOM elements directly using the methods above.
97
There is typo error in your question:
it is not applyStyle but applyStyles.
applyStyles is method of Ext.Element, you can use it as follows:
var win = new Ext.Window({ width: 200, height: 200 }); win.show(); win.body.applyStyles({ 'background-color':'red', 'border': '1px solid blue' }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
