CODEWITHSUNDEEP
extjs
YOGEESH
YOGEESH

Reputation: 66

How to edit/update existing component CSS in extjs with component ID as reference?

I have popup form component which has form header body footer. How can I update CSS of those HTML elements with the help of form container componentID.

I have tried these:

getComponent('stakeholderAddUserWindow').update({height: 1900});

getComponent('stakeholderAddUserWindow').addClass('newclass');

getComponent('stakeholderAddUserWindow').style: 'background-color: #5E99CC';

getComponent('stakeholderAddUserWindow').update({style: 'background-color: #5E99CC;'});

I have other doubt how to traverse from the container to inner child elements, here I have 3 child elements with classes x-header, x-body, x-footer. I want to apply CSS to the body.

<div class="x-window flex-window deploymentPlanWindow x-layer x-
window-default x-border-box" id="stakeholderAddUserWindow-1502" 
componentid="stakeholderAddUserWindow-1502">

  <div class="x-window-header x-header"id="stakeholderAddUserWindow-
  1502_header">header</div>

  <div class="x-window-body x-body"id="stakeholderAddUserWindow-
  1502_body">body</div>

  <div class="x-window-footer x-footer"id="stakeholderAddUserWindow-
  1502_footer">footer</div>

</div>

Ext.get(Ext.query('.x-window > .x-window-header')).setStyle('background', 'blue');

Above one not working

Upvotes: 0

Views: 739

Answers (1)

Hesam Faridmehr
Hesam Faridmehr

Reputation: 1196

For editing styles use 'setStyle' function on components or elements

And for adding and removing classes use addCls and removeCls functions

getComponent('stakeholderAddUserWindow').setStyle('height', '437px');

Upvotes: 1

Related Questions