[CLOSED] Serious problem with viewport

[78fede78]

I noticed a strand rendering problem on my web application.

only if I open the tab
https://examples1.ext.net/#/GridPane.../Form_Details/

Everything is correct (Figure 1)

my browser is Internet Explorer 7


if I click in rapid succession before "form details" and after "one to many"

detail form page is rendered incorrectly

The detailed format is strangely left-aligned (Figure 2).
my page takes several seconds to load, this is a very serious problem that many customers have reported to me

you have managed to emulate the same problem?


using internet explorer you have to click "Form details" and after "one to many" in rapid succession

[Daniil]

Everything is correct (Figure 1)

Hi,

Seems you forgot to attach screen-shots.

[78fede78]

Hi Daniill
I'm sorry now I have attached.
You understand what's the problem?

I think that changing the current tab when you are loading give big problems rendering.

[78fede78]

Hi.
You are watching this problem?

[Daniil]

Hi,

I have been tried but was unable to reproduce...

As far as I can understand this is reproducible in your real application, right?

Please try the following thing

<ext:Viewport runat="server" MonitorResize="true" AutoDoLayout="true">

If the issue will persist could you provide us with your code?

[78fede78]

Hello Daniil

It is not necessary that I give you my source code.

The problem is also present on your code.

If you enter a sleep of 20 seconds in the page_load

https://examples1.ext.net/#/GridPane.../Form_Details/

the error is even more evident.

You must use internet explorer
Click "Form Details"

while the page loads you have to select another tab.

wait 20 seconds.

go to "Form Details".

[Daniil]

Now, I have reproduced it. Thank for the exact steps and the report.

The problem happens because tab's content is rendered when this tab is inactive.

The two ways to solve are:

1. HideMode="offsets" for a tab
2. Re-layout after tab's change (in a TabChange's handler)

The ticket has been created
https://extnet.lighthouseapp.com/pro...ab-is-inactive

The fix has been committed (Revision #3316)

The result you can see in the toolkit's source (Ext.Net.Examples). This will available in the online Examples Explorer after its update.

[78fede78]

ok thanks.
My solution to correct what should I do?
you can simply refresh ext.net.dll or should I change the javascript that handles the tabs?

var addTab = function(tabPanel, id, url, title) {
            var tab = tabPanel.getComponent(id);

            if (!tab) {
                tab = tabPanel.add({
                    id: id,
                    title: title,
                    closable: true,
                    autoLoad: {
                        showMask: true,
                        url: url,
                        mode: "iframe",
                        maskMsg: LoadMessage + "..."
                    }
                });               
                tab.on("activate", function() {
                    var item = MenuPanel1.menu.items.get(id + "_item");

                    if (item) {
                        MenuPanel1.setSelection(item);
                    }
                }, this);
            }

            tabPanel.setActiveTab(tab);
        }

[Daniil]

you can simply refresh ext.net.dll or should I change the javascript that handles the tabs?
There is no problem in Ext.Net.dll. There has been a problem in Examples Explorer configuration.

To solve it please set the tab's .hideMode to 'offsets'.

Example (see a comment)

var addTab = function(tabPanel, id, url, title) {
    var tab = tabPanel.getComponent(id);

    if (!tab) {
        tab = tabPanel.add({
            id: id,
            title: title,
            closable: true,
            hideMode: "offsets", //here is the fix
            autoLoad: {
                showMask: true,
                url: url,
                mode: "iframe",
                maskMsg: LoadMessage + "..."
            }
        });
        tab.on("activate", function() {
            var item = MenuPanel1.menu.items.get(id + "_item");

            if (item) {
                MenuPanel1.setSelection(item);
            }
        }, this);
    }

    tabPanel.setActiveTab(tab);
}