What's New?

[CLOSED] GridPanel and UI

  1. #1
    Apr 08, 2015, 11:23 PM

    [CLOSED] GridPanel and UI

    So it looks like if I want the UI color border to incase the entire GridPanel I need to put it in another panel.


    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<script runat="server">
     
</script>
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel ID="UIPanel" runat="server" Title="GridPanel w/ UI" TitleAlign="Center"
        Frame="false" Width="400" Height="300" Margin="10" UI="Primary">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Button" />
                </Items>
            </ext:Toolbar>
        </TopBar>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Column" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:Panel runat="server" Title="GridPanel in Panel w/ UI" TitleAlign="Center"
        Frame="false" Width="400" Height="300" UI="Primary" Margin="10">
        <Items>
            <ext:GridPanel runat="server" Border="false">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Button" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" Text="Column" />
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </Items>
    </ext:Panel>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: GridPanelUI.PNG  Views: 8  Size: 8.8 KB  ID: 23621  
    Last edited by Daniil; Apr 17, 2015 at 12:44 PM. Reason: [CLOSED]
  2. #2
    Apr 10, 2015, 12:09 PM
    Hi Chris,

    Well, yes, there is a special border for a Panel's/GridPanel's body only.

    To achieve the requirement I can suggest the following CSS rules:
    .x-panel-primary .x-toolbar.x-docked-top {
    border-color: #2d6ca2;
}

.x-panel-primary .x-grid-header-ct {
    border-right-color: #2d6ca2;
    border-left-color: #2d6ca2;
}

.x-grid-body.x-panel-body-primary {
    border-top-color: #c5c5c5;
}
  3. #3
    Apr 17, 2015, 12:06 PM
    I still have a tough time determining the exact CSS selectors to use/override. Thanks for the information.

    Please close the thread.

Posting Permissions