The display of treepanel with version 4.8.3 is normal, but the display of treepanel with version 5.3.0 is not normal

[lixiping]

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Window ID="WinRolePermission" runat="server" Width="580" Height="780" Layout="FitLayout" Maximized="true"
    Icon="UserGreen" Title="??????" Modal="true" CloseAction="Destroy" Resizable="true" Maximizable="true">
    <Items>     
        <ext:TreePanel ID="TreeRolePermission" runat="server" UseArrows="false" 
            Animate="true"  Header ="true" Title ='<%# "???"+ViewData["sName"] %>' AutoDataBind="true" RootVisible="false">
            <Store>
                <ext:TreeStore runat="server" AutoLoad="true">
                    <Root>
                        <ext:Node NodeID="Root" Expanded="false">
                        </ext:Node>
                    </Root>
                    <Proxy>
                        <ext:AjaxProxy>
                            <API Read="/SystemManagement/Role/getRolePermission/" />
                            <ActionMethods Read="GET" />
                            <ExtraParams>
                                <ext:Parameter Name="sId" Value='<%# ViewData["sId"] %>' Mode="Value" AutoDataBind="true" />
                            </ExtraParams>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Listeners>
                        <Load Handler="this.getRootNode().expand(true);" Delay="100" />

                    </Listeners>
                </ext:TreeStore>
            </Store>
            <Buttons>
                <ext:Button runat="server" Text="Save" Icon="Accept">
                    <DirectEvents>
                        <Click Url="/SystemManagement/Role/SavePermission/"
                        Success="Ext.net.Notification.show({
                                        iconCls  : 'icon-information',
                                        pinEvent : 'click',
                                        html     : '?????',
                                        title    : '??'
                                     });                            
                             this.up('window').close(); ">
                            <EventMask ShowMask="true"/>
                            <ExtraParams>
                            <ext:Parameter Name="id" Value='<%# ViewData["sId"] %>' Mode="Value" AutoDataBind="true" />
                            <ext:Parameter Name ="mids" Value="getMids(this.getRootNode().getChecked())" Mode ="Raw" />
                            <ext:Parameter Name ="sids" Value="getPids(this.getRootNode().getChecked())" Mode ="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>      
        </ext:TreePanel>
    </Items>
    <Listeners>
        <Destroy Fn="ActionFormDestroy">
        </Destroy>
    </Listeners>
</ext:Window>

[fabricio.murta]

Hello, @lixiping!

It is a bit difficult to reproduce the problem you described on our end unless you provide the code to a runnable test case. So for now, we will try a few guesses for what could be wrong with the port...

Firs, this could very well be an issue with v5.3.0, and to advise over that, we'd need the test case.

Assuming though, you didn't hide anything from the v4 screen snippet, it shows the Tree Panel alone, while in v5 it is wrapped in a Tab Panel, I believe. Could that be the issue? The code sample you shared doesn't suggest a Tab Panel anywhere, so it is in the least something introduced in the screen snippets that are not in the code shared. If that's the issue, maybe giving the tab panel a fixed height will help fix the issue.

The second guess would be with the selected theme. Maybe in the way you set up v4 example breaks with the theme version in v5? You may try switching between themes to check it out.

Last, if you have custom style css from v4, it could be that one or more rules didn't apply well in v5 and would need reviewing; this one is kind of a long shot, as it is not really likely to be the case, but worth mentioning.

If, after reviewing all these suggestions, you are still in the dark, please give the test case a try; usually you can get a test case working in no time if you can base it off one of our handful of examples in Ext.NET 5 Examples Explorer. You can grab a copy of the whole C# project from its GitHub repository.

There's a few simple Tree Panel examples for both v4 and v5 you could compare at once; for one:

- v4 TreePanel > Basic
- v5 TreePanel > Basic

Hope this helps!

[lixiping]

It is normal when back to version 4.8.3 (I have already conducted a test,only Change software version from Nuget)! it is abnormal display under the version 5.3.0. It may be is a bug in version 5.3.0. I hope you can help me identify the issue, it is very important for me;

Also, can you tell me where to change the default display font, as the Chinese font is not clear enough

[fabricio.murta]

Hello again, @lixiping!

Without a test case it's going to be difficult to help you. But something else that came to mind is, perhaps the data coming back from the server is not being translated properly. If you check the browser console and can locate error messages related to Ext.decode(), that's most likely the case you need to review the server's returned raw data to comply to JSON specifications.

Also, can you tell me where to change the default display font, as the Chinese font is not clear enough

You'd have to override the theme's defined font settings. Notice different rules might need to be overridden in order to replace the font, say, in the body of a panel, the tab titles, grid panel contents and chart text. Without further ado, this has been discussed in the following thread and it should help with the question: How to change default font family

Hope this helps!