[CLOSED] 2.x to 4.x upgrade, using the default font, sizes etc. from 2.x

**rmelancon** · Jan 26, 2017, 12:41 PM

One of the issues I am having with the upgrade from 2.x to 4.x is that the default fonts and sizes are different and therefore throws off the spacing etc on a lot of pages. As an example take this simple page:

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <ext:ResourceManager ID="ResourceManager" runat="server" />

    <ext:Panel ID="HeatMapChartPanel" runat="server" Border="false" Layout="FitLayout">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarSpacer ID="ToolbarSpacer4" runat="server" Width="10" />
                    <ext:Label ID="Label1" runat="server" Text="Trailing 12 Month Performance" ></ext:Label>
                    <ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
                    <ext:ToolbarFill />
                    <ext:Label ID="EffectiveDate" runat="server" />  
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Panel>

</body>
</html>

In version 2.x the following style is the default:

.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
    font: normal 11px arial,tahoma,helvetica,sans-serif;
}

In version 4.x this is the style:

.x-body {
    color: #000;
    font-size: 12px;
    font-family: tahoma, arial, verdana, sans-serif;
}

Is there anyway for to force 4.x to use the same default font's and sizes for elements as 2.x?

**fabricio.murta** · Jan 27, 2017, 8:04 AM

Hello @rmelacon!

Unfortunately the theming system changed dramatically since version 2 and it is really hard to tell that, even if we do find some way now to keep the styles between the two versions, we can't guarantee it will still work for, say, a version 5. This is particularly true when we are talking about a 2 major releases steps.

Specially between major version release, there are loads of technology added up, and many times it is just not feasible to keep backwards compatibility.

For pontual theme overrides I still believe the best would be by overriding the CSS styles individually. But if you want to make a theme "for real", you may want to rebuild a theme or build a new theme from Ext.NET sources using also Sencha CMD (our Ext.NET license makes you eligible to use Sencha CMD, albeit not all other Sencha tools are available). Then a starting point would be the ExtJS Theming System documentation. There are some forum threads that also covers the theming subject if you're interested.

Well, but even with all that, chances are when migrating from major releases you would have to spend time merging the theme from the previous version with the new one and "populating" the missing/misplaced styles that will always show up.

Hope this helps!

**fabricio.murta** · Jan 27, 2017, 8:09 AM

Hello again!

The reply was a little 'repeated'. I had a "deja vu" feeling when I saw this question, replied, and didn't click 'send' after authoring the answer. So I added much of what I already added there.

I noticed you provided full code sample and not only the both CSS versions that works in 2.x and 4.x for you. I will take a look on the test sample you provided and see if I can find anything of useful to help you in the migration process. I'll post a follow-up here soon. But honestly, I have little hope of finding something really easy here.

I believe you are using the Gray (ExtJS's classic) theme, right?

**rmelancon** · Jan 27, 2017, 12:03 PM

Yes we are using the "grey" theme. I will look into the the sencha tool for customizing theme. Thanks for the help.

**rmelancon** · Jan 27, 2017, 12:33 PM

So with the ExtJS sdk, I had to get the "trial" version. Do we have a license for that via ext.net?

**geoffrey.mcgill** · Jan 27, 2017, 3:55 PM

Can you define what you mean by the "ExtJS sdk"? Sencha CMD?

If Sencha CMD, then yes, rights to use Sencha CMD is included with Ext.NET Enterprise.

**fabricio.murta** · Jan 27, 2017, 5:36 PM

Hello @rmelancon!

By this section of the theming guide provided a few posts up, you can read:

For this tutorial weâ€™ll create a workspace using Sencha Cmd so that the custom theme is accessible to all apps within the workspace. Run the following command from the web server directory where your workspace will be created (replace {path/to/Ext-JS-SDK} in the following command with the local path to the Ext JS SDK).

and then they show a line of code

sencha -sdk {path/to/Ext-JS-SDK} generate workspace my-workspace

So it seems we're really talking about Sencha CMD, which is eligible to use by an Ext.NET 4 license holder.

Hope this helps!

**rmelancon** · Jan 27, 2017, 5:46 PM

From the link on themes that you sent, part of the requirements say install EXTjs SDK, see below:

Requirements

Sencha Cmd 6+

Sencha Cmd is a command-line tool used to package and deploy Ext JS applications. To build a theme in Ext JS, you must have Sencha Cmd 6 or higher installed on your computer. For more information about installing and getting started with Sencha Cmd see Introduction to Sencha Cmd.

Java JRE 1.7+ (optional, but recommended)

Java JRE 1.7+ is required to run â€œsencha app watchâ€. This command is run within the application directory and updates the compiled theme automatically as you modify the theme source. Cmd 6+ has two installers available: with the JRE packaged into the installer or as a stand-alone installer without the JRE. Note: Without Java JRE 1.7+ and â€œsencha app watchâ€ you will need to run â€œsencha app refreshâ€ after each change made to the application and / or theme as you follow through the steps in this guide.

Ext JS

Custom themes are based on default themes included with the Ext JS SDK. Download Ext JS and extract the Ext JS development kit (SDK) to a location of your choosing.

**fabricio.murta** · Jan 27, 2017, 6:03 PM

Hello @rmelancon!

Do you have access to our github repository? Pull latest version of the `master` branch (or checkout 4.2.0 tag if you want to stick with the same version that's on NuGet currently). The files described in the bold part of the text you quoted are under src/Build/Ext.Net/extjs/extjs-sources/!

If you don't have access to github to get Ext.NET sources, please email us at support@ext.net requesting the access instructions! You should have received emails about this right after you purchased your 4.x license (notice you'd require a 4.x license to that, which I think it is the case).

Hope this helps!

**fabricio.murta** · Jan 27, 2017, 6:22 PM

Hello again!

I've just tried your test code with Ext.NET 2 and 4, using the same CSS you said that worked for 2.x, and I seen the changes working just the same in the 4.x code. The two pages with same CSS style override, looks identical.

Of course, I've changed the resource manager line so that it uses the Gray theme, like this:

<ext:ResourceManager ID="ResourceManager" runat="server" Theme="Gray" />

Maybe I still didn't understand your main question at all?

Thread: [CLOSED] 2.x to 4.x upgrade, using the default font, sizes etc. from 2.x

Thread Tools

Search Thread

Display

[CLOSED] 2.x to 4.x upgrade, using the default font, sizes etc. from 2.x

Similar Threads

[CLOSED] Setting default font of HtmlEditor

[CLOSED] How to change default font family

Help me!How to change gridpanel's default font size?

[CLOSED] Label and LinkButton Doesn't seem to have a default font

How to change default font of HTML Editor

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] 2.x to 4.x upgrade, using the default font, sizes etc. from 2.x

[CLOSED] 2.x to 4.x upgrade, using the default font, sizes etc. from 2.x

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us