EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 5 of 5

Thread: Background Image

  1. #1
    Member
    Join Date
    Jun 2012
    Posts
    6

    Background Image

    Dear all,
    I'm new in ext.net and I have a simple question: is it possible to set a background image for a view like this (this is the default Login page):

    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>My Title</title>    
        <style type="text/css">
            h1 {
                font: normal 60px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 {
                font: normal 20px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 a {
                text-decoration: none;
                color: #E1E1E1;
            }
            
            .x-window-mc {
                background-color : #F4F4F4 !important;
            }
        </style>
        <script type="text/javascript">
            if (window.top.frames.length !== 0) {
                window.top.location = self.document.location;
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>My App</h1>
        <h2>Powered by <a href="">xxx.net</a></h2>
        <ext:Window 
            ID="LoginWindow"
            runat="server" 
            Closable="false"
            Resizable="false"
            Height="130" 
            Icon="Lock" 
            Title="Login"
            Draggable="true"
            Width="300"
            Modal="true"
            Layout="fit"
            BodyBorder="false"
            Padding="5">        
            <Items>
                    <ext:FormPanel 
                        runat="server" 
                        FormID="form1"
                        Border="false"
                        Layout="form"
                        BodyBorder="false" 
                        BodyStyle="background:transparent;" 
                        Url='<%# Html.AttributeEncode(Url.Action("Login")) %>'>
                        <Items>
                            <ext:TextField 
                                ID="txtUsername" 
                                runat="server" 
                                FieldLabel="Username" 
                                AllowBlank="false"
                                BlankText="Username is required."
                                Text="demo"
                                AnchorHorizontal="100%"
                                />
                             <ext:TextField 
                                ID="txtPassword" 
                                runat="server" 
                                InputType="Password" 
                                FieldLabel="Password" 
                                AllowBlank="false" 
                                BlankText="Password is required."
                                Text="demo"
                                AnchorHorizontal="100%"
                                />
                        </Items>
                    </ext:FormPanel>
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="Login" Icon="Accept">
                    <DirectEvents>
                        <Click 
                            Url="~/Account/Login/" 
                            Timeout="60000"
                            FormID="form1"
                            CleanRequest="true" 
                            Method="POST"
                            Before="Ext.Msg.wait('Verifica...', 'Autenticazione');"
                            Failure="Ext.Msg.show({
                               title:   'Login Error',
                               msg:     result.errorMessage,
                               buttons: Ext.Msg.OK,
                               icon:    Ext.MessageBox.ERROR
                            });">
                            <EventMask MinDelay="250" />
                            <ExtraParams> 
                                <ext:Parameter Name="ReturnUrl" Value="Ext.urlDecode(String(document.location).split('?')[1]).r || '/'" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:Window>
    </body>
    </html>
    I tried to set it directly in the body tag or using a css but I wasn't unable to achieve the target.
    Thanks in advance,
    Alessandro
    Last edited by Daniil; Jun 18, 2012 at 11:57 PM. Reason: Please use [CODE] tags

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,822
    Hi,

    Do you need to set up a background for the Window or for the whole page?
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Jun 2012
    Posts
    6
    Hi Danill,
    I need to set up a background image for the whole page.

    Thanks,
    Alessandro

    Quote Originally Posted by Daniil View Post
    Hi,

    Do you need to set up a background for the Window or for the whole page?

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,822
    Please look at the example.

    Example
    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <style type="text/css">
            body {
                background-image: url("resources/images/test.png");
            }
            
            .transparent-window,
            .transparent-window .x-window-body, 
            .transparent-window .x-panel-body {
                background-color: transparent;
            }
            
            .transparent-panel {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout"
            Cls="transparent-window"
            Border="false">
            <Items>
                <ext:FormPanel runat="server" BodyCls="transparent-panel" Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </body>
    </html>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Member
    Join Date
    Jun 2012
    Posts
    6
    It works like a charm!

    Thanks a lot.
    Alessandro

    Quote Originally Posted by Daniil View Post
    Please look at the example.

    Example
    Code:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <style type="text/css">
            body {
                background-image: url("resources/images/test.png");
            }
            
            .transparent-window,
            .transparent-window .x-window-body, 
            .transparent-window .x-panel-body {
                background-color: transparent;
            }
            
            .transparent-panel {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout"
            Cls="transparent-window"
            Border="false">
            <Items>
                <ext:FormPanel runat="server" BodyCls="transparent-panel" Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Button control - image background
    By rnfigueira in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 16, 2011, 1:29 PM
  2. stretch background image
    By maryam in forum 1.x Help
    Replies: 0
    Last Post: Nov 07, 2010, 5:31 AM
  3. Set Viewport Background color or image
    By geodan in forum 1.x Help
    Replies: 4
    Last Post: May 28, 2010, 10:59 AM
  4. [CLOSED] GridPanel background image
    By methode in forum 1.x Premium Help
    Replies: 2
    Last Post: Mar 02, 2009, 6:13 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 4:55 PM

Tags for this Thread

Posting Permissions