[CLOSED] Element got style="width:0px;" default

[ViDom]

Hi,

My situation is pretty strange default style attribute with value width:0px; is loaded even though I doesn't do anything like this for my own.
It's for sure problem with my app because I've tryed wrote simplest sample and this behaviour doesn't occure ;/

In this case I've tryed wrote some other way to make it right(ExtJs script in my guess)

I've wrote this script which should replace old value 0px with new one 60% ( required of scalability).

<script type="text/javascript">
        Ext.onReady(function () {
            var items = Ext.select('div.x-form-element');
            var items2 =Ext.select('div.x-form-element:first-child');
            for (var item in items) {
                item.setStyle('width', '60%');
            }
            for(var item2 in items2)
            {
                item2.setStyle('width', '60%');
            }
        });
    </script>

but in firebug console I've got error says

TypeError: item.setStyle is not a function

even when in ExtJs 3.4 documentation it's exists.
What am I doing wrong?

Thanks,
ViDom

[Daniil]

Hi @ViDom,

Hard to say why width is 0 in your application.

Could you provide a full sample to reproduce the issue with the provided code snippet?

[ViDom]

Like i wrote in starting post:

It's for sure problem with my app because I've tryed wrote simplest sample and this behaviour doesn't occure ;/

I've got really nested architecture about 5-6 levels of nesting so it's almost impossible to make simple sample for this.
so answer to your question @Daniil is no I can't make such kind of sample:(

I need to change this with javascript(solution for now).

[Daniil]

Well, maybe, Ext.onReady is too early to work with the DOM objects of the components. We might be not rendered yet.

I would suggest to listen to the AfterRender event of some container where you place the fields.

Also, please try:

Ext.select('div.x-form-element').setStyle('width', '60%');
Ext.select('div.x-form-element:first-child').setStyle('width', '60%');

instead of your JavaScript code.

[ViDom]

Well, maybe, Ext.onReady is too early to work with the DOM objects of the components. We might be not rendered yet.

I would suggest to listen to the AfterRender event of some container where you place the fields.

Also, please try:

Ext.select('div.x-form-element').setStyle('width', '60%');Ext.select('div.x-form-element:first-child').setStyle('width', '60%');

instead of your JavaScript code.

Ok I've just tryed your code:)
it's changed only elements with .x-form-element class not first child in it it's can be mistake in my sample.
Do I get child in proper selector?

[Daniil]

Please clarify what exactly elements are you trying to fetch?

[ViDom]

Please clarify what exactly elements are you trying to fetch?

<div id="ext-comp-1002" class=" x-form-composite x-box-layout-ct x-form-field" style="width: 0px;">

this is html of what I need get it's first child of div with x-form-element class

[Daniil]

it's changed only elements with .x-form-element class not first child in it it's can be mistake in my sample.

Well, if you want to apply the width for the first child only, then, I think, you should remove:

Ext.select('div.x-form-element').setStyle('width', '60%');

<div id="ext-comp-1002" class="  x-form-composite x-box-layout-ct x-form-field" style="width:  0px;">

this is html of what I need get it's first child of div with x-form-element class

Yes, the selector looks correct.

[ViDom]

Well, if you want to apply the width for the first child only, then, I think, you should remove:

Ext.select('div.x-form-element').setStyle('width', '60%');

Yes, the selector looks correct.

I want to apply with to x-form-element and to first child of it which I showed in previous post.
First child hasn't be processed. With my code

Ext.select('div.x-form-element:first-child').setStyle('width', '60%');

[Daniil]

Maybe, you need this.

Ext.select('div.x-form-element input:first-child')

Honestly, the requirement is a bit unclear. Maybe, providing us with a mockup of your page where you would highlight and describe main points could clarify something. I mean that, maybe, there is some better solution.