PDA

View Full Version : Datepicker & combobox rendering problem



napolux
25 May 2009, 11:34 PM
Hi there. We're working on an Ext.js application. We started with 2.2.1 version but we're trying to implement Ext 3.0 RC1.

We're having rendering issues with the datepicker & the combobox element (see attachments, the trigger is rendered on the left of the field). Changing the library version to 2.2.1 solves the problem... Is there any difference in the components behaviour?

Thanks in advance.

Animal
26 May 2009, 12:10 AM
Did you also update the CSS files to the 3.0 versions?

napolux
26 May 2009, 12:23 AM
Did you also update the CSS files to the 3.0 versions?
Yes, I have two separated folders for ExtJS2 & ExtJS3 with the whole package.

I grab the CSS from

lib/extjs3/resources/css/ext-all.css

napolux
26 May 2009, 2:46 AM
I FORGOT TO TELL... IT HAPPENS ONLY IN FIREFOX 3!

Ant1105
26 May 2009, 4:26 PM
Are you rendering them into a div with a display of none before you use them? I noticed the same thing. Try changing to display of block and see if that helps.

napolux
26 May 2009, 11:51 PM
It's rendered into a panel...

Animal
27 May 2009, 12:50 AM
You don't render into Panels.

Ant1105
27 May 2009, 7:30 AM
You should provide example code so we can see how you are rendering your form.

In my case, it was just a simple combo getting rendered into a hidden div.



<div style="display: none;"> <!-- Change to display: block to fix the trigger -->
<div id="comboDiv"></div>
</div>


new Ext.form.ComboBox({
renderTo: 'comboDiv'
...
});

napolux
28 May 2009, 1:06 AM
You should provide example code so we can see how you are rendering your form.

I'm creating all dinamically from a json file...

Look at this (a sample datepicker)...




newObj = new Ext.form.DateField({
id: obj.name,
name: obj.name,
fieldLabel: obj.label,
format: obj.dateFormat,
width: 200,
value: obj.object_value
});


I store every object created while parsing the json in an array and then put them into a FormPanel in the items: property.

Animal
28 May 2009, 1:11 AM
This is just debuggable.

You check that the DOM structure is correctly rendered by the FormLayout layuot manager.

Then you check that the CSS rules applied to it are the correct CSS rules for the version of Ext you are running.

Nobody else can do that for you. That is part of your job.