PDA

View Full Version : [CLOSED] Icon in a FieldSet Title



xtoolz
May 21, 2014, 12:54 PM
Hi all,
I wrote code for the Ext.Net 2.2 Version to add an Icon to the Fieldset Title :

http://forums.ext.net/attachment.php?attachmentid=11281&stc=1

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

geoffrey.mcgill
May 21, 2014, 1: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.

xtoolz
May 21, 2014, 2: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>

xtoolz
May 21, 2014, 2: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 ?

http://forums.ext.net/attachment.php?attachmentid=11291&stc=1

Daniil
May 21, 2014, 4: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.

xtoolz
May 21, 2014, 5:46 PM
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.


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

Daniil
May 22, 2014, 6:00 AM
You need to register Icons.

Example C#

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
ResourceManager.GetInstance().RegisterIcon(Icon.Bu lletWhite);
ResourceManager.GetInstance().RegisterIcon(Icon.Bu lletGreen);
}
}

To shift the text to get an icon visible/not overlapped, you can use this:

<style>
.fieldset-icon {
padding-left: 20px;
}
</style>

xtoolz
May 23, 2014, 3:22 PM
Works - thank you !

Peter