What's New?

[CLOSED] Icon in a FieldSet Title

  1. #1
    May 21, 2014, 11:54 AM

    [CLOSED] Icon in a FieldSet Title

    Hi all,
    I wrote code for the Ext.Net 2.2 Version to add an Icon to the Fieldset Title :



    I used this Code

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GreenDot.aspx.vb" Inherits="WebApplication1.GreenDot" %>

<!DOCTYPE html>

<html>
<head>
    <title>Green Dot</title>

    <script type="text/javascript">

        function green() {
            updateDataIndicator('fsTest', true);
        }

        function blank() {
            updateDataIndicator('fsTest', false);
        }

        function updateDataIndicator(control, hasData) {
            var ctrl = Ext.getCmp(control);
            if (ctrl != null) {

                var currentTitle = ctrl.title;
                if (hasData) {
                    currentTitle = currentTitle.replace('icon-bulletwhite', 'icon-bulletgreen');
                }
                else {
                    currentTitle = currentTitle.replace('icon-bulletgreen', 'icon-bulletwhite');
                }
                ctrl.setTitle(currentTitle);

            }
        }

    </script>


</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel runat="server" ID="outerPanel" Width="450">
            <Items>
                <ext:Button runat="server" Text="Green">
                    <Listeners>
                        <Click Handler="green();"></Click>
                    </Listeners>
                </ext:Button>
                <ext:Button runat="server" Text="Blank">
                    <Listeners>
                        <Click Handler="blank();"></Click>
                    </Listeners>
                </ext:Button>
                <ext:FieldSet ID="fsTest" runat="server" Title="Test Field Set" Collapsible="true" Collapsed="true" Width="450">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="Test"></ext:TextField>

                    </Items>
                </ext:FieldSet>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>
    This Code dose't work with the 2.5.1 Release !? What has changed ?

    Kind Regards
    Peter
    Attached Thumbnails Click image for larger version.  Name: 21-05-2014 13-53-14.png  Views: 52  Size: 1.4 KB  ID: 11281  
    Last edited by Daniil; May 23, 2014 at 2:37 PM. Reason: [CLOSED]
  2. #2
    May 21, 2014, 12:11 PM
    Hello,

    Use a client-side debugger such as Firefox + Firebug to step through your code.

    Your .title never contains 'icon-bulletwhite' nor 'icon-bulletgreen'. You have a logic problem.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    May 21, 2014, 1:17 PM
    Sorry my wrong :-(

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GreenDot.aspx.vb" Inherits="WebApplication1.GreenDot" %>

<!DOCTYPE html>

<html>
<head>
    <title>Grid Read Only</title>

    <script type="text/javascript">

        function green() {
            updateDataIndicator('fsTest', true);
        }

        function blank() {
            updateDataIndicator('fsTest', false);
        }

        function prepare() {
            var ctrl = Ext.getCmp('fsTest');
            var span = "<span class='fieldset-icon icon-bulletwhite'>{0}</span>".format(ctrl.title);
            ctrl.setTitle(span);

        }

        function updateDataIndicator(control, hasData) {
            var ctrl = Ext.getCmp(control);
            if (ctrl != null) {

                var currentTitle = ctrl.title;
                if (hasData) {
                    currentTitle = currentTitle.replace('icon-bulletwhite', 'icon-bulletgreen');
                }
                else {
                    currentTitle = currentTitle.replace('icon-bulletgreen', 'icon-bulletwhite');
                }
                ctrl.setTitle(currentTitle);

            }
        }

     
            String.prototype.format = function () {
                var args = arguments;
                return this.replace(/{(\d+)}/g, function (match, number) {
                    return typeof args[number] != 'undefined'
                      ? args[number]
                      : match
                    ;
                });
            };
        

    </script>


</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel runat="server" ID="outerPanel" Width="450">
            <Items>
                <ext:Button runat="server" Text="Green">
                    <Listeners>
                        <Click Handler="green();"></Click>
                    </Listeners>
                </ext:Button>
                <ext:Button runat="server" Text="Blank">
                    <Listeners>
                        <Click Handler="blank();"></Click>
                    </Listeners>
                </ext:Button>
                <ext:FieldSet ID="fsTest" runat="server" Title="Test Field Set" Collapsible="true" Collapsed="true" Width="450">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="Test"></ext:TextField>

                    </Items>
                </ext:FieldSet>
            </Items>
            <Listeners>
                <AfterRender Handler="prepare();"></AfterRender>
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>
    Generated Code 

    <!DOCTYPE html>
<html class="x-strict x-theme-gray">
<head>
<title></title>
<style>
.x-border-box, .x-border-box * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.x-fieldset-header-text {
    float: left;
}
.x-fieldset-header-text {
    font: 11px/14px bold tahoma, arial, verdana, sans-serif;
    color: #333;
    padding: 1px 0;
}
.x-fieldset-header-text-collapsible {
    cursor: pointer;
}
.x-fieldset-header {
    overflow: hidden;
}
.x-fieldset-header {
    padding: 0 3px 1px;
}
.x-fieldset {
    display: block;
    position: relative;
}
.x-fieldset {
    border: 1px solid #b5b8c8;
    padding: 0 10px;
    margin: 0 0 10px;
}
.x-fieldset-collapsed {
    padding-bottom: 0px !important;
    border-width: 1px 1px 0 1px !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
.x-fieldset {
    overflow: hidden;
}
.x-fieldset, .x-fieldset .x-fieldset-body, .x-ie .x-fieldset .x-fieldset-body {
    padding-top: 0px;
}
.x-panel-body {
    overflow: hidden;
    position: relative;
}
.x-panel-body-default {
    background: white;
    border-color: #d0d0d0;
    color: black;
    font-size: 12px;
    font-size: normal;
    border-width: 1px;
    border-style: solid;
}
.x-panel, .x-plain {
    overflow: hidden;
    position: relative;
}
.x-panel {
    outline: 0;
}
.x-panel-default {
    border-color: #d0d0d0;
    padding: 0;
}
.x-body {
    margin: 0;
}
.x-body {
    color: black;
    font-size: 12px;
    font-family: tahoma,arial,verdana,sans-serif;
}
</style>
</head>
<body class="x-body x-ie10 x-nlg" id="ext-gen1018"><form id="form1" action="GreenDot.aspx" method="post"><div id="App.outerPanel_Container"><div class="x-panel x-panel-default x-border-box" id="outerPanel" style="width: 450px; height: 51px;"><div class="x-panel-body x-panel-body-default x-panel-body-default" id="outerPanel-body" style="left: 0px; top: 0px; width: 450px; height: 51px;"><span id="outerPanel-outerCt" style="width: 100%; display: table; table-layout: fixed;"><div id="outerPanel-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"><fieldset class="x-fieldset x-fieldset-with-title x-fieldset-with-header x-fieldset-default x-fieldset-collapsed" id="fsTest" style="width: 450px;"><legend class="x-fieldset-header x-fieldset-header-default" id="fsTest-legend"><span id="fsTest-legend-outerCt" style="display: table;"><div id="fsTest-legend-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"><div class="x-component x-fieldset-header-text x-fieldset-header-text-collapsible x-component-default" id="fsTest-legendTitle"><span class="fieldset-icon icon-bulletgreen">Test Field Set</span></div></div></span></legend></fieldset></div></span></div></div></div></form></body>
</html>
  4. #4
    May 21, 2014, 1:22 PM
    In the meanwhile I got the Green Dot back, but the Spacing between the Expand toggle and the Fieldset Text is too small. Can I increase this spacing ?

    Attached Thumbnails Click image for larger version.  Name: 21-05-2014 15-20-27.png  Views: 37  Size: 1.4 KB  ID: 11291  
  5. #5
    May 21, 2014, 3:39 PM
    Running your test case I don't see a "green dot". Am I misunderstanding something?

    Can I increase this spacing ?
    Yes, that might be possible applying some CSS rule like padding or margin.
  6. #6
    May 21, 2014, 4:46 PM
    Quote Originally Posted by Daniil View Post
    Running your test case I don't see a "green dot". Am I misunderstanding something?
    That's exactly the problem :-)
    The Title is rendered like this

    <div class="x-component x-fieldset-header-text x-fieldset-header-text-collapsible x-component-default" id="fsTest-legendTitle"><span class="fieldset-icon icon-bulletgreen">Test Field Set</span>
    But the 'icon-bulletgreen' doesn't appear. In my Application - now way to post an example out of the App, shows the Icon now - but overlapped by the Text.

    Quote Originally Posted by Daniil View Post
    Yes, that might be possible applying some CSS rule like padding or margin.
    Any Example how to do that ?
    I remember that I had this Problem some times ago also with Ext v1 - but I can't find the Forum entry...
  7. #7
    May 22, 2014, 5:00 AM
    You need to register Icons.

    Example C#
    protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        ResourceManager.GetInstance().RegisterIcon(Icon.BulletWhite);
        ResourceManager.GetInstance().RegisterIcon(Icon.BulletGreen);
    }
}
    To shift the text to get an icon visible/not overlapped, you can use this:
    <style>
    .fieldset-icon {
        padding-left: 20px;
    }
</style>
  8. #8
    May 23, 2014, 2:22 PM
    Works - thank you !

    Peter

Similar Threads

  1. [CLOSED] Fieldset title and Padding property
    By Svr77 in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 19, 2013, 2:43 PM
  2. fieldset title
    By zhouguoguang in forum 1.x Help
    Replies: 0
    Last Post: Sep 30, 2010, 6:21 AM
  3. FieldSet title shifting when expanding/collapsing
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: May 28, 2009, 7:57 PM
  4. FieldSet title shifting when expanding/collapsing
    By dbassett74 in forum 1.x Help
    Replies: 4
    Last Post: May 06, 2009, 1:15 PM
  5. set Title in Fieldset dynamically
    By jmilton in forum 1.x Help
    Replies: 4
    Last Post: Mar 27, 2009, 4:39 PM

Posting Permissions