Buy Spotless

Spotless Theme by Ext.NET

Spotless is dressed to impress.

Knock the socks off your users by adding the new Spotless premium theme to your app.

Spotless is hand-crafted with loving care and shined to a mirror finish using the finest Carnauba wax imported from the rich misty mountains of the Brazillian Serra do Mar. 😉

Built to fully support Sencha Ext JS Classic and Ext.NET Classic v7+ applications.

Features

Instantly modernize your app using the new Spotless theme, then sit back and bask in the sweet sweet glory.

The Spotless premium theme is now available to purchase.

Please contact hello@ext.net if you have any questions or comments and we will do our best to assist.

Technical support questions are best asked in the Ext.NET Premium Themes forum.

New Modern Styling

items: [{                                         // New default Panel styling
    title: "Icon",
    iconCls: "x-md md-icon-check-circle-outline"  // 1317 new Material Design icons
}, {
    title: "Tools",
    tools: [{
        type: "help"                              // New Tools hover style
    }, {
        iconCls: "x-md md-icon-search"
    }]
}, {
    title: "Loading...",
    fill: true,                                   // New Fill style
    listeners: {
        render: {
            delay: 50,
            fn: function () {
                this.body.mask('Loading...');     // New Loading Mask style
            }
        }
    }
}, {
    title: "Fill & Frame",
    fill: true,
    frame: true                                   // New Frame style
}]
Items = new [] {
    new Panel {
        Title = "Icon",
        IconCls = "x-md md-icon-check-circle-outline"
    },
    new Panel {
        Title = "Tools",
        Tools = new ItemCollection {
            new Tool { Type = "help" },
            new Tool { IconCls = "x-md md-icon-search" }
        }
    },
    new Panel {
        Title = "Loading...",
        Fill = true,
        Listeners = new PanelListenerCollection {
            Render = new RenderListener {
                Delay = 50,
                Handler = "this.body.mask('Loading...')"
            }
        }
    },
    new Panel {
        Title = "Fill & Frame",
        Fill = true,
        Frame = true
    }
}
<items>
    <ext-panel title="Icon" iconCls="x-md md-icon-check-circle-outline" />
    <ext-panel title="Tools">
        <tools>
            <ext-tool type="help" />
            <ext-tool iconCls="x-md md-icon-search" />
        </tools>
    </ext-panel>
    <ext-panel title="Loading..." fill="true">
        <listeners>
            <render delay="50" handler="this.body.mask('Loading...')" />
        </listeners>
    </ext-panel>
    <ext-panel title="Fill & Frame" fill="true" frame="true" />
</items>

New Panel Configs

items: [
    { title: "Rounded" },                                    // Rounded corners by default
    { title: "Not Rounded", rounded: false },                // Remove rounded corners
    { title: "Border Radius", borderRadius: "12 36 12 36" }, // Custom radius for corners
    { title: "Fill", fill: true }                            // Fill body color
]
Items = new [] {
    new Panel { Title = "Rounded" },
    new Panel { Title = "Not Rounded", Rounded = false },
    new Panel { Title = "Border Radius", BorderRadius = "12 36 12 36" },
    new Panel { Title = "Fill", Fill = true }
}
<items>
    <ext-panel title="Rounded" />
    <ext-panel title="Not Rounded" rounded="false" />
    <ext-panel title="Border Radius" borderRadiusAsString="12 36 12 36" />
    <ext-panel title="Fill" fill="true" />
</items>

New Panel UI

items: [
    { title: "Primary",   ui: "primary" },
    { title: "Secondary", ui: "secondary" },
    { title: "Success",   ui: "success" },
    { title: "Danger",    ui: "danger" },
    { title: "Warning",   ui: "warning" },
    { title: "Info",      ui: "info" },
    { title: "Light",     ui: "light" },
    { title: "Dark",      ui: "dark" }
]
Items = new [] {
    new Panel { Title = "Primary", UI = UI.Primary },
    new Panel { Title = "Secondary", UI = UI.Secondary },
    new Panel { Title = "Success", UI = UI.Success },
    new Panel { Title = "Danger", UI = UI.Danger }
    new Panel { Title = "Warning", UI = UI.Warning },
    new Panel { Title = "Info", UI = UI.Info },
    new Panel { Title = "Light", UI = UI.Light },
    new Panel { Title = "Dark", UI = UI.Dark }
}
<items>
    <ext-panel title="Primary" ui="Primary" />
    <ext-panel title="Secondary" ui="Secondary" />
    <ext-panel title="Success" ui="Success" />
    <ext-panel title="Danger" ui="Danger" />
    <ext-panel title="Warning" ui="Warning" />
    <ext-panel title="Info" ui="Info" />
    <ext-panel title="Light" ui="Light" />
    <ext-panel title="Dark" ui="Dark" />
</items>

New Button UI

items: [
    { text: "Primary",   ui: "primary" },
    { text: "Secondary", ui: "secondary" },
    { text: "Success",   ui: "success" },
    { text: "Danger",    ui: "danger" },
    { text: "Warning",   ui: "warning" },
    { text: "Info",      ui: "info" },
    { text: "Light",     ui: "light" },
    { text: "Dark",      ui: "dark" }
]
Items = new [] {
    new Button { Text = "Primary", UI = UI.Primary },
    new Button { Text = "Secondary", UI = UI.Secondary },
    new Button { Text = "Success", UI = UI.Success },
    new Button { Text = "Danger", UI = UI.Danger },
    new Button { Text = "Warning", UI = UI.Warning },
    new Button { Text = "Info", UI = UI.Info },
    new Button { Text = "Light", UI = UI.Light },
    new Button { Text = "Dark", UI = UI.Dark }
}
<items>
    <ext-button text="Primary" ui="Primary" />
    <ext-button text="Secondary" ui="Secondary" />
    <ext-button text="Success" ui="Success" />
    <ext-button text="Danger" ui="Danger" />
    <ext-button text="Warning" ui="Warning" />
    <ext-button text="Info" ui="Info" />
    <ext-button text="Light" ui="Light" />
    <ext-button text="Dark" ui="Dark" />
</items>

New BorderRadius

items: [
    { text: "End",    borderRadius: "50% 0 0 50%" },
    { text: "Left",   borderRadius: "6 0 0 6" },
    { text: "Square", borderRadius: 0 },
    { text: "Pill",   borderRadius: "50%" },
    { text: "Offset", borderRadius: "4 12",        iconAlign: "right" },
    { text: "Square", borderRadius: false,         iconAlign: "right" },
    { text: "Right",  borderRadius: "0 6 6 0",     iconAlign: "right" },
    { text: "End",    borderRadius: "0 50% 50% 0", iconAlign: "right" },
]
Items = new [] {
    new Button { Text = "End"     BorderRadius = "50% 0 0 50%" },
    new Button { Text = "Left",   BorderRadius = "6 0 0 6" },
    new Button { Text = "Square", BorderRadius = 0 },
    new Button { Text = "Pill",   BorderRadius = "50%" },
    new Button { Text = "Offset", BorderRadius = "4 12", IconAlign = "Right" },
    new Button { Text = "Square", BorderRadius = false, IconAlign = "Right" },
    new Button { Text = "Right",  BorderRadius = "0 6 6 0", IconAlign = "Right" },
    new Button { Text = "End",    BorderRadius = "0 50% 50% 0", IconAlign = "Right" },
}
<items>
    <ext-button text="End"    borderRadius="50% 0 0 50%" />
    <ext-button text="Left"   borderRadius="6 0 0 6" />
    <ext-button text="Square" borderRadius="0" />
    <ext-button text="Pill"   borderRadius="50%" />
    <ext-button text="Offset" borderRadius="4 12", iconAlign="Right" />
    <ext-button text="Square" borderRadius="false", iconAlign="Right" />
    <ext-button text="Right"  borderRadius="0 6 6 0", iconAlign="Right" />
    <ext-button text="End"    borderRadius="0 50% 50% 0", iconAlign="Right" />
</items>

Component Gallery

Panels

Tools

TabPanels

Plain

Buttons

Scale

Toggle

Menu

Split

Segmented

Forms

Toolbars

Windows

Fill

MessageBoxes

Default and UI options

Toast

GridPanels

TreePanels

Layouts

Border

The Spotless theme is commercial software and subject to the Ext.NET Pro Theme Software License Agreement.