[CLOSED] GridPanel background image

  1. #1

    [CLOSED] GridPanel background image

    Hi all,

    my aim is to show an image on the grid if my data resultset is empty.
    this css class works well, but I nedd to set it acording to data.

    .x-grid3-body
    {
      height: 100px !important;
      background: url(images/myImage.png) no-repeat 10px 10px !important;
    }
    I tried in several ways without success, here it is some of them:

    store

    listeners

    <Load Handler="            
      var style = {
    'height' : '100px',
          'background-image' : 'url(images/infoFilters.png)'
    };
    
      if(this.data.length == 0)
      {
          #{GridPanel1}.body.applyStyles(style);
          #{GridPanel1}.body.repaint(); // for test
      }
     " />
     
    // ---
    
    <Load Handler="   
        if(this.data.length == 0)
        {
            #{GridPanel1}.body.addClass('myCssClassSettingBgImage');
            #{GridPanel1}.body.repaint(); // for test
        }
     " />
    Thanx

    Matteo
  2. #2

    RE: [CLOSED] GridPanel background image

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]{};
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title> 
        
        <style type="text/css">
            .empty-grid .x-grid3-body
            {
                        height: 100px !important;
                        background: url(add.png) no-repeat 10px 10px !important;
            }
        </style> 
        
        <script type="text/javascript">
            function showImage(grid, records) {
                if (records &amp;&amp; records.length == 0) {
                    if (grid.rendered) {
                        grid.body.addClass("empty-grid");
                    }
                    else {
                        grid.on("render", function() { this.body.addClass("empty-grid"); }, this);
                    }
                }
                else {
                    if (grid.rendered) {
                        grid.body.removeClass("empty-grid");
                    }
                    else {
                        grid.on("render", function() { this.body.removeClass("empty-grid"); }, this);
                    }
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />                       
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
                <Listeners>
                    <Load Handler="showImage(#{GridPanel1}, records);" />
                </Listeners>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true"
                Title="Array Grid" 
                TrackMouseOver="true"
                Width="600" 
                Height="350"
                AutoExpandColumn="Company">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                    </Columns>
                </ColumnModel>         
            </ext:GridPanel>          
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] GridPanel background image

    *Thanx Vlad,

    it works great!


    Matteo

Similar Threads

  1. Background Image
    By ausai in forum 2.x Help
    Replies: 4
    Last Post: Jun 19, 2012, 12:41 PM
  2. [CLOSED] Button control - image background
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 16, 2011, 12:29 PM
  3. stretch background image
    By maryam in forum 1.x Help
    Replies: 0
    Last Post: Nov 07, 2010, 4:31 AM
  4. [CLOSED] background image position in HTMLeditor
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: May 10, 2010, 2:06 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Posting Permissions