PDA

View Full Version : [CLOSED] Replacement : FieldSet.Icon



sisa
Jan 18, 2013, 11:21 AM
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 :-)

Daniil
Jan 18, 2013, 3:13 PM
Hi Peter,

Please read this post.
http://forums.ext.net/showthread.php?19678&p=84786&viewfull=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?19678&p=84786&viewfull=1#post84786

sisa
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

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

Commonly, I also update the online version.
http://examples2.ext.net/#/Getting_Started/Release_Documents/BREAKING_CHANGES/

sisa
Apr 26, 2013, 12:52 PM
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

Daniil
Apr 26, 2013, 2:45 PM
Please organize it as a runnable test case (a standalone ASPX page).

sisa
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>

Daniil
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.Bu lletGreen);
}
}

Daniil
Apr 30, 2013, 4:23 AM
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.Bu lletGreen);
}
}

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));