What's New?

[CLOSED] Replacement : FieldSet.Icon

  1. #1
    Jan 18, 2013, 11:21 AM

    [CLOSED] Replacement : FieldSet.Icon

    Hi all

    we migrate an Ext.Net 1.x Application to version 2.1.
    We use the 'FieldSet' on several Places in this App.

    The old FieldSet has the Icon Property and we used it to indicate the existence of Data (The FieldSet holds a GridPanel).
    Any suggestions on how to manage this in 2.1 ?

    Kind Regards
    Peter - sisa :-)
    Last edited by Daniil; Apr 30, 2013 at 4:23 AM. Reason: [CLOSED]
  2. #2
    Jan 18, 2013, 3:13 PM
    Hi Peter,

    Please read this post.
    http://forums.ext.net/showthread.php...ll=1#post84786

    We added a new breaking change item.

    155. Now the FieldSet class inherits from the Container one, not from the Panel one as it is in Ext.NET v1.

    So, FieldSet lost "Panel" functionality.

    In particular, it doesn't have the Icon property.

    This examples demonstrates an approach to put an icon into a FieldSet's title.
    http://forums.ext.net/showthread.php...ll=1#post84786
  3. #3
    Jan 21, 2013, 6:46 AM
    Hi Daniil

    thanks for this !
    My Braking Changes Doc end at #145 !?
    Got to look for a newer Version :-)

    Peter
  4. #4
    Jan 21, 2013, 6:52 AM
    I updated the BREAKING_CHANGES.txt in SVN (trunk).

    Commonly, I also update the online version.
    https://examples2.ext.net/#/Getting_...AKING_CHANGES/
    Last edited by geoffrey.mcgill; Apr 30, 2013 at 12:51 PM.
  5. #5
    Apr 26, 2013, 12:52 PM

    Problems again

    Hi Daniil

    I have problems again to set the FieldSet Icon.
    Here is my simple test case :

    The Page

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/ViewPortSimple.Master" AutoEventWireup="true" CodeBehind="FieldSet.aspx.cs" Inherits="XToolz.MyMDB.View.Pages.FieldSet" %>


<asp:Content ID="Content1" ContentPlaceHolderID="contentMain" runat="server">
    <link href="../CSS/Main.css" rel="stylesheet" />
    <ext:FieldSet ID="fsTestIcon" runat="server" Title="Field Set with Icon" Collapsible="true" Collapsed="True" >
        <Items>
            <ext:TextField runat="server"></ext:TextField>
        </Items>
    </ext:FieldSet>
    <ext:Checkbox runat="server" ID="chkSetData" FieldLabel="Check me" AnchorHorizontal="80%" Padding="10" Handler="CheckBoxHandler"/>
</asp:Content>
    The Code

    function CheckBoxHandler(cb, checked) {
    setDataIndicator('fieldSet', 'contentMain_fsTestIcon', checked);
}



function setDataIndicator(type, control, hasData) {
    var ctrl = Ext.getCmp(control);
    if (ctrl != null) {
        var currentTitle = ctrl.title;
        ctrl.setTitle("<span class='fieldset-icon icon-bulletgreen'></span>");

        //var span = "";

        //switch (type) {
        //    case 'fieldSet':
        //        var currentTitle = ctrl.title;
        //        if (hasData) {
        //            span = "<span class='fieldset-icon icon-bulletgreen'></span>";
        //        } else {
        //            span = "<span class='fieldset-icon icon-bulletwhite'></span>";
        //        }
        //        ctrl.setTitle(span + currentTitle);
        //        break;

        //    case 'tab':
        //        if (hasData) {
        //            ctrl.setIconCls('#BulletGreen');

        //        } else {
        //            ctrl.setIconCls('#BulletWhite');
        //        }

        //        break;

        //    default:
        //}
    }
}
    The CSS

    /* Fiels Set Example */
.fieldset-icon {
    font-size: 12px;
    padding-left: 20px;
}
    Checking the Checkbox removes the FielsSet Title (correct with this code) but the Icon doesn't appear ?

    Any Idea whats wrong in this code

    Peter
  6. #6
    Apr 26, 2013, 2:45 PM
    Please organize it as a runnable test case (a standalone ASPX page).
  7. #7
    Apr 26, 2013, 4:45 PM 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="FieldSetTestCase.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            .fieldset-icon {
                font-size: 12px;
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <script>
                function CheckBoxHandler(cb, checked) {
                    setDataIndicator('fieldSet', 'fsTestIcon');
                }

                function setDataIndicator(type, control) {
                    var ctrl = Ext.getCmp(control);
                    if (ctrl != null) {
                        var currentTitle = ctrl.title;
                        ctrl.setTitle("<span class='fieldset-icon icon-bulletgreen'></span>" + currentTitle);

                    }
                }
            </script>
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                        <Items>
                            <ext:Panel ID="Panel5" runat="server" Title="Center" Border="false" BodyPadding="6">
                                <Content>
                                    <ext:Checkbox runat="server" ID="chkSetData" FieldLabel="Check me" Handler="CheckBoxHandler" />
                                    <ext:FieldSet ID="fsTestIcon" runat="server" Title="Field Set with Icon" Collapsible="true" Collapsed="False">
                                        <Items>
                                            <ext:TextField ID="TextField1" runat="server"></ext:TextField>
                                        </Items>
                                    </ext:FieldSet>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
</html>
  8. #8
    Apr 26, 2013, 6:38 PM
    Thank you.

    You have to register the BulletGreen icon to get the "icon-bulletgreen" CSS class working.
    protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        ResourceManager.GetInstance().RegisterIcon(Icon.BulletGreen);
    }
}
  9. #9
    Apr 30, 2013, 4:23 AM
    Quote Originally Posted by Daniil View Post
    Thank you.

    You have to register the BulletGreen icon to get the "icon-bulletgreen" CSS class working.
    protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        ResourceManager.GetInstance().RegisterIcon(Icon.BulletGreen);
    }
}
    Another approach is replacing
    ctrl.setTitle("<span class='fieldset-icon icon-bulletgreen'></span>" + currentTitle);
    with
    ctrl.setTitle(Ext.String.format("<span class='fieldset-icon {0}'></span>{1}", Ext.net.ResourceMgr.getIcon("BulletGreen"), currentTitle));

Similar Threads

  1. What is MVC - AjaxStoreResult.cs replacement Ext 2.0
    By dpk in forum 2.x Help
    Replies: 1
    Last Post: Aug 21, 2012, 7:37 AM
  2. AddLabelCls replacement
    By Zdenek in forum 2.x Help
    Replies: 2
    Last Post: Aug 16, 2012, 5:08 PM
  3. [CLOSED] .add property NOT available in v2.0, what is the replacement?
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 09, 2012, 6:08 PM
  4. [CLOSED] Fieldset Icon Property
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 21, 2012, 2:40 PM
  5. [CLOSED] FieldSet graphic (icon for expand / collapse) bottom border line is not showing in google chrome while collapse.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM

Posting Permissions