PDA

View Full Version : [CLOSED] Override checkbox behavior



pawangyanwali
Jun 12, 2013, 6:43 AM
I would like have my checkbox look like this.

http://jsfiddle.net/musicisair/qRDpu/light/

How can I override the checkbox's default behavior to this? Can you please provide me some guidelines for this?

Daniil
Jun 12, 2013, 11:10 AM
Hi Pawan,

Unfortunately, there is no a simple guide for your requirement.

You can investigate the CheckBox's sources:
http://docs.sencha.com/extjs/4.2.1/source/Checkbox.html#Ext-form-field-Checkbox

I feel it might require to override a lot of things, but I would start from "fieldSubTpl". Also you will have to attach those CSS rules (from jsfiddle).

I would also think about a new individual component instead of overriding the CheckBox class. At the moment I am not sure what would be best.

pawangyanwali
Jun 12, 2013, 11:35 AM
Thank you so much for your response.
I read the source code file of checkbox.
Actually, I was also visiting other links where I can get some idea to override the behavior of checkbox. Here I have found an example. Is this is the proper way to implement overriding?

http://extjs-4.blogspot.com/2013/01/extjs-overriding-inbuilt-methods-for.html

Can I do the same thing in case of overriding "fieldSubTpl" of checkbox???

Daniil
Jun 12, 2013, 12:35 PM
Yes, you can use the Ext.override function to do it.

pawangyanwali
Jun 13, 2013, 11:44 AM
I have become a little bit of successful in overriding checkbox. But when I try to implement it with other css, it display nothing. Here is what I want to implement.

http://jsfiddle.net/jHgef/

Here is what I have done.
http://jsfiddle.net/czrt6/195/

Can you please help me what I am doing wrong?


And by the way, can I use other html tags like 'div', 'span' and others???

And my main target is to modify this to checkbox slider. But what I have found is most of them use other javascript frameworks like 'Mootools' or 'jQuery'. When I tried to use them in JsFiddle, it display nothing.

Daniil
Jun 13, 2013, 3:48 PM
Here is what I want to implement.

http://jsfiddle.net/jHgef/


Well, it is much different from the initial custom Checkbox. I think this new one can be implemented simpler.




<style>
.my-checkbox .x-form-checkbox {
background: url("custom-chekcbox.gif") no-repeat scroll 0 0 transparent;
}
</style>


<ext:Checkbox runat="server" Cls="my-checkbox" />

You will need to make "custom-chekcbox.gif". The original one you can find here: "/extjs/resources/ext_theme_classic/images/form/checkbox.gif".



And by the way, can I use other html tags like 'div', 'span' and others???

I think you can use any HTML elements for your custom components.



And my main target is to modify this to checkbox slider. But what I have found is most of them use other javascript frameworks like 'Mootools' or 'jQuery'. When I tried to use them in JsFiddle, it display nothing.

Maybe, it needs to include its sources in External Resources.

pawangyanwali
Jun 14, 2013, 3:56 AM
Can you please have a look at this??? What I am doing wrong??

This is what I want to implement
http://jsfiddle.net/tb9NZ/138/

in this.
http://jsfiddle.net/czrt6/205/

I have used jQuery and other Html tags here.

pawangyanwali
Jun 14, 2013, 6:59 AM
I figured out the problem. Now it is working fine.

http://jsfiddle.net/czrt6/214/

Now when I tried to implement this one in my ext.net app, it is not working.

It gives warning like:


Unhandled exception at line 10956, column 17 in http://localhost:1431/extjs/ext-all-debug-js/ext.axd?v=39822

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined


I have used jQuery file in my view.

Daniil
Jun 14, 2013, 10:16 AM
What is a test case?

pawangyanwali
Jun 14, 2013, 10:33 AM
After checking the overriding in jsFiddle. Now I want to use this checkbox in my ext.net app like this after I use :


Html.X().Checkbox().BoxLabel("Stay Signed In").ID("chkStaySignedIn")

in my cshtml file.

6375

Daniil
Jun 14, 2013, 1:36 PM
Do you mean this jsfiddle item?
http://jsfiddle.net/czrt6/214/

It seems that "OFF" is not switching to "ON" when I click the custom component. But instead the underneath checkbox gets checked. Is that correct?

Re: Razor

To use your custom component you need to add the Ext.override(...) script and the CSS styles to the view. Then it should affect on any Html.X().Checkbox().

pawangyanwali
Jun 17, 2013, 3:52 AM
Sorry for providing you the old link. This is the working one.

http://jsfiddle.net/czrt6/218/

Actually, I did the exact way you have asked me to do.

I have used it like this.

_Layout.cshtml


@{
Layout = null;

}

<!DOCTYPE html>

<html>
<head>
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="@Url.Content("~/Resources/css/examples.css")" />
<link rel="stylesheet" href="@Url.Content("~/resources/css/main.css")" />
<script src="@Url.Content("~/resources/js/main.js")"></script>

<script src="@Url.Content("~/resources/js/Notification.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")"></script>
<style type="text/css">

.x-btn-button
{
color: red !important;
}
</style>

@RenderSection("headtag", false)
<script>
Ext.net.DirectEvent.timeout = 200000;
Ext.Ajax.timeout = 200000;
</script>
</head>
<body>
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)
.Theme(Theme.Gray)
.ShowWarningOnAjaxFailure(false)
.Listeners(l => l.AjaxRequestException.Fn = "onError")
.Locale("en")
.IDMode(IDMode.Static)
.StartupMask(new StartupMask{FadeOutDuration = 100, HideDelay= 100, Message = "Please wait.. loading....."})
.ScriptMode(Ext.Net.ScriptMode.Debug)

)
@RenderSection("content", true)

</body>
</html>



main.js



Ext.override(Ext.form.field.Checkbox, {

fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'{boxLabel} <label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"

'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}{boxLabel}',
'</tpl>',
{
disableFormats: true,
compiled: true
}

]
});


main.css


/*newly added css*/


#sliderLabel {
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
height: 20px;
margin: -5px 3px;
overflow: hidden;
position: relative;
width: 60px;
}
#sliderLabel input{
display: none;
}

#sliderLabel input:checked + #slider{
left: 0px;
}

#slider {
left: -50px;
position: absolute;
top: 0px;
-moz-transition: left .25s ease-out;
-webkit-transition: left .25s ease-out;
-o-transition: left .25s ease-out;
transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff {
display: block;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:10px;
height: 20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0px;
}
#sliderOn {
background: #3269aa;
background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3269aa), color-stop(100%, #82b3f4));
background: -webkit-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -o-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -ms-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: linear-gradient(top, #3269aa 0%, #82b3f4 100%);
color: white;
left: 0px;
width: 30px;
}
#sliderBlock {
background: #d9d9d8;
background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d8), color-stop(100%, #fcfcfc));
background: -webkit-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -o-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -ms-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 28px;
left: 30px;
width: 45px;
}
#sliderOff {
background: #f2f3f2;
background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b8c8b), color-stop(50%, #f2f3f2));
background: -webkit-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -o-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -ms-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
color: #8b8b8b;
left: 65px;
width: 50px;
}

It is working fine in the login page. It comes like this.

6387

But when I open window.. It prompts this kind of error.

6388

6389

And opens windows in very unmanaged way with missing window controls.
6390

Daniil
Jun 17, 2013, 4:47 PM
I can't run the sample to reproduce the issue due to missing parts. Please post a runnable test case (please simplify as much as you can).

Unfortunately, the error message is not enough for me to determine the problem.

pawangyanwali
Jun 18, 2013, 9:26 AM
Well I have used ext.net mvc sample project to create a test case.
When I made change on this and it is working.
Areas\Form_Groups\Views\Basic\Index.cshtml


@{
ViewBag.Title = "CheckboxGroup and RadioGroup Configuration Options - Ext.NET MVC Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}

@section headtag
{
<style type="text/css">
#sliderLabel {
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
height: 20px;
margin: -5px 3px;
overflow: hidden;
position: relative;
width: 60px;
}
#sliderLabel input{
display: none;
}

#sliderLabel input:checked + #slider{
left: 0px;
}

#slider {
left: -50px;
position: absolute;
top: 0px;
-moz-transition: left .25s ease-out;
-webkit-transition: left .25s ease-out;
-o-transition: left .25s ease-out;
transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff {
display: block;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:10px;
height: 20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0px;
}
#sliderOn {
background: #3269aa;
background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3269aa), color-stop(100%, #82b3f4));
background: -webkit-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -o-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -ms-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: linear-gradient(top, #3269aa 0%, #82b3f4 100%);
color: white;
left: 0px;
width: 30px;
}
#sliderBlock {
background: #d9d9d8;
background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d8), color-stop(100%, #fcfcfc));
background: -webkit-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -o-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -ms-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 28px;
left: 30px;
width: 45px;
}
#sliderOff {
background: #f2f3f2;
background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b8c8b), color-stop(50%, #f2f3f2));
background: -webkit-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -o-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -ms-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
color: #8b8b8b;
left: 65px;
width: 50px;
}
</style>
<script>
var beforeButton1Click = function(extraParams) {
if (!this.up('form').isValid())
return false;
Ext.ComponentQuery.query('checkboxgroup').forEach( function(item, index) {
if (item.isXType('checkboxgroup', true)) {
var count = 0;
extraParams['groups1[' + index + '].FieldLabel'] = item.fieldLabel;
Ext.ComponentQuery.query('checkbox', item).forEach(function(innerItem) {
if (innerItem.isXType('checkbox') && innerItem.checked) {
extraParams['groups1[' + index + '].CheckedItems[' + count + '].BoxLabel'] = innerItem.boxLabel;
count++;
}
});
}
});

Ext.ComponentQuery.query('radiogroup').forEach(fun ction(item, index) {
if (item.isXType('radiogroup', true)) {
var count = 0;
extraParams['groups2[' + index + '].FieldLabel'] = item.fieldLabel;
Ext.ComponentQuery.query('checkbox', item).forEach(function(innerItem) {
if (innerItem.isXType('radio') && innerItem.checked) {
extraParams['groups2[' + index + '].CheckedItems[' + count + '].BoxLabel'] = innerItem.boxLabel;
count++;
}
});
}
});

return true;
};

Ext.override(Ext.form.field.Checkbox, {

fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'{boxLabel} <label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"

'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}{boxLabel}',
'</tpl>',
{
disableFormats: true,
compiled: true
}

]
});
</script>
}

@section example
{
<h1>Checkbox / Radio Groups</h1>

<p>This demonstrates the flexible layout capabilities of the CheckboxGroup and RadioGroup classes. It also
shows that you can validate checkboxes/radios as a group &mdash; try submitting the form before changing
any values to see this.</p>
<p>This illustrates the cascading configuration <code>fieldDefaults</code>. At the Panel level, it sets the field label
color to green, so all ancestor fields have green labels.</p>

@(X.FormPanel()
.ID("Panel1")
.Title("Check/Radio Groups Example")
.Frame(true)
.Width(600)
.BodyPadding(10)
.FieldDefaults(fd => { fd.LabelWidth = 110; fd.LabelStyle = "color:green;padding-left:4px;"; })
.Buttons(
X.Button()
.ID("Button1")
.Text("Save")
.Icon(Icon.Disk)
.DirectEvents(de => {
de.Click.Url = Url.Action("Button1Click");
de.Click.Before = "beforeButton1Click.call(this, extraParams);";
}),

X.Button()
.Text("Reset")
.OnClientClick("this.up('form').reset();")
)
.Items(
X.Container()
.Layout(LayoutType.HBox)
.MarginSpec("0 0 10")
.Items(
X.FieldSet()
.Flex(1)
.Title("Individual Checkboxes")
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.Defaults(X.Parameter().Name("HideEmptyLabel").Value("false").Mode(ParameterMode.Raw))
.Items(
X.TextField().FieldLabel("Alignment Test"),
X.Checkbox().BoxLabel("Dog").FieldLabel("Favorite Animals"),
X.Checkbox().BoxLabel("Cat"),
X.Checkbox().BoxLabel("Monkey").Checked(true)
),

X.Component().Width(10),

X.FieldSet()
.Flex(1)
.Title("Individual Radios")
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.Defaults(X.Parameter().Name("HideEmptyLabel").Value("false").Mode(ParameterMode.Raw))
.Items(
X.TextField().FieldLabel("Alignment Color"),
X.Radio().BoxLabel("Red").Name("fav-color").FieldLabel("Favorite Color").Checked(true),
X.Radio().BoxLabel("Blue").Name("fav-color"),
X.Radio().BoxLabel("Green").Name("fav-color")
)
),

X.FieldSet()
.Title("Checkbox Groups (initially collapsed)")
.Layout(LayoutType.Anchor)
.Collapsible(true)
.Collapsed(true)
.DefaultAnchor("100%")
.Items(
X.TextField().FieldLabel("Alignment Test"),

X.CheckboxGroup()
.ID("CheckboxGroup1")
.Cls("x-check-group-alt")
.FieldLabel("Auto Layout")
.Items(
X.Checkbox().ID("Checkbox4").BoxLabel("Item 1"),
X.Checkbox().ID("Checkbox5").BoxLabel("Item 2").Checked(true),
X.Checkbox().ID("Checkbox6").BoxLabel("Item 3"),
X.Checkbox().ID("Checkbox7").BoxLabel("Item 4"),
X.Checkbox().ID("Checkbox8").BoxLabel("Item 5")
),

X.CheckboxGroup()
.ID("CheckboxGroup2")
.FieldLabel("Single Column")
.ColumnsNumber(1)
.Items(
X.Checkbox().ID("Checkbox9").BoxLabel("Item 1"),
X.Checkbox().ID("Checkbox10").BoxLabel("Item 2").Checked(true),
X.Checkbox().ID("Checkbox11").BoxLabel("Item 3")
),

X.CheckboxGroup()
.ID("CheckboxGroup3")
.FieldLabel("Multi-Column (Horizontal)")
.ColumnsNumber(3)
.Cls("x-check-group-alt")
.Items(
X.Checkbox().ID("Checkbox12").BoxLabel("Item 1"),
X.Checkbox().ID("Checkbox13").BoxLabel("Item 2").Checked(true),
X.Checkbox().ID("Checkbox14").BoxLabel("Item 3"),
X.Checkbox().ID("Checkbox15").BoxLabel("Item 4"),
X.Checkbox().ID("Checkbox16").BoxLabel("Item 5")
),

X.CheckboxGroup()
.ID("CheckboxGroup4")
.FieldLabel("Multi-Column (Vertical)")
.ColumnsNumber(3)
.Vertical(true)
.Items(
X.Checkbox().ID("Checkbox17").BoxLabel("Item 1"),
X.Checkbox().ID("Checkbox18").BoxLabel("Item 2").Checked(true),
X.Checkbox().ID("Checkbox19").BoxLabel("Item 3"),
X.Checkbox().ID("Checkbox20").BoxLabel("Item 4"),
X.Checkbox().ID("Checkbox21").BoxLabel("Item 5")
),

X.CheckboxGroup()
.ID("CheckboxGroup5")
.FieldLabel("Multi-Column<br />(Custom Widths)")
.ColumnsWidths(new double[] { 100, 100 })
.Vertical(true)
.Cls("x-check-group-alt")
.Items(
X.Checkbox().ID("Checkbox22").BoxLabel("Item 1"),
X.Checkbox().ID("Checkbox23").BoxLabel("Item 2").Checked(true),
X.Checkbox().ID("Checkbox24").BoxLabel("Item 3"),
X.Checkbox().ID("Checkbox25").BoxLabel("Item 4"),
X.Checkbox().ID("Checkbox26").BoxLabel("Item 5")
),

X.CheckboxGroup()
.ID("CheckboxGroup6")
.MsgTarget(MessageTarget.Side)
.FieldLabel("Custom Layout<br />(w/ validation)")
.AllowBlank(false)
.AutoFitErrors(false)
.Layout(LayoutType.Column)
.AnchorHorizontal("-18")
.Items(
X.Container().ColumnWidth(0.25)
.Items(
X.Component().Html("Heading 1").Cls("x-form-check-group-label"),
X.Checkbox().ID("Checkbox27").BoxLabel("Item 1").Checked(true),
X.Checkbox().ID("Checkbox28").BoxLabel("Item 2").Checked(true)
),

X.Container().ColumnWidth(0.5)
.Items(
X.Component().Html("Heading 2").Cls("x-form-check-group-label"),
X.Checkbox().ID("Checkbox29").BoxLabel("A long item just for fun")
),

X.Container().ColumnWidth(0.25)
.Items(
X.Component().Html("Heading 3").Cls("x-form-check-group-label"),
X.Checkbox().ID("Checkbox1").BoxLabel("Item 4").Checked(true),
X.Checkbox().ID("Checkbox2").BoxLabel("Item 5")
)
)
),

X.FieldSet()
.Title("Radio Groups")
.Layout(LayoutType.Anchor)
.Collapsible(true)
.DefaultAnchor("100%")
.Items(
X.TextField().FieldLabel("Alignment Test"),

X.RadioGroup()
.ID("RadioGroup1")
.FieldLabel("Auto Layout")
.Cls("x-check-group-alt")
.Items(
X.Radio().ID("Radio4").BoxLabel("Item 1"),
X.Radio().ID("Radio5").BoxLabel("Item 2").Checked(true),
X.Radio().ID("Radio6").BoxLabel("Item 3"),
X.Radio().ID("Radio7").BoxLabel("Item 4"),
X.Radio().ID("Radio8").BoxLabel("Item 5")
),

X.RadioGroup()
.ID("RadioGroup2")
.FieldLabel("Single Column")
.ColumnsNumber(1)
.Items(
X.Radio().ID("Radio9").BoxLabel("Item 1"),
X.Radio().ID("Radio10").BoxLabel("Item 2").Checked(true),
X.Radio().ID("Radio11").BoxLabel("Item 3")
),

X.RadioGroup()
.ID("RadioGroup3")
.FieldLabel("Multi-Column (Horizontal)")
.ColumnsNumber(3)
.Cls("x-check-group-alt")
.Items(
X.Radio().ID("Radio12").BoxLabel("Item 1"),
X.Radio().ID("Radio13").BoxLabel("Item 2").Checked(true),
X.Radio().ID("Radio14").BoxLabel("Item 3"),
X.Radio().ID("Radio15").BoxLabel("Item 4"),
X.Radio().ID("Radio16").BoxLabel("Item 5")
),

X.RadioGroup()
.ID("RadioGroup4")
.FieldLabel("Multi-Column(Vertical)")
.ColumnsNumber(3)
.Vertical(true)
.Items(
X.Radio().ID("Radio17").BoxLabel("Item 1"),
X.Radio().ID("Radio18").BoxLabel("Item 2").Checked(true),
X.Radio().ID("Radio19").BoxLabel("Item 3"),
X.Radio().ID("Radio20").BoxLabel("Item 4"),
X.Radio().ID("Radio21").BoxLabel("Item 5")
),

X.RadioGroup()
.ID("RadioGroup5")
.FieldLabel("Multi-Column<br />(Custom Widths)")
.ColumnsWidths(new double[] { 100, 100 })
.Vertical(true)
.Cls("x-check-group-alt")
.Items(
X.Radio().ID("Radio22").BoxLabel("Item 1"),
X.Radio().ID("Radio23").BoxLabel("Item 2").Checked(true),
X.Radio().ID("Radio24").BoxLabel("Item 3"),
X.Radio().ID("Radio25").BoxLabel("Item 4"),
X.Radio().ID("Radio26").BoxLabel("Item 5")
),

X.RadioGroup()
.ID("RadioGroup6")
.MsgTarget(MessageTarget.Side)
.FieldLabel("Custom Layout<br />(w/ validation)")
.AllowBlank(false)
.AutoFitErrors(false)
.Layout(LayoutType.Column)
.AnchorHorizontal("-18")
.Items(
X.Container()
.ColumnWidth(0.25)
.ID("RadioColumn1")
.Items(
X.Component().Html("Heading 1").Cls("x-form-check-group-label"),
X.Radio().ID("Radio27").BoxLabel("Item 1"),
X.Radio().ID("Radio28").BoxLabel("Item 2").Checked(true)
),

X.Container().ColumnWidth(0.5)
.Items(
X.Component().Html("Heading 2").Cls("x-form-check-group-label"),
X.Radio().ID("Radio29").BoxLabel("A long item just for fun")
),

X.Container().ColumnWidth(0.25)
.Items(
X.Component().Html("Heading 3").Cls("x-form-check-group-label"),
X.Radio().ID("Radio30").BoxLabel("Item 4"),
X.Radio().ID("Radio31").BoxLabel("Item 5")
)
)
)
)
)

@(X.Label().ID("Label1"))
}



But when I made change over here, it is not working.
Areas\Window_Basic\Views\Hello_World\Index.cshtml


@{
ViewBag.Title = "Simple Ext.NET Window Sample - Ext.NET Examples";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}
@section headtag
{
<style type="text/css">
#sliderLabel {
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
height: 20px;
margin: -5px 3px;
overflow: hidden;
position: relative;
width: 60px;
}
#sliderLabel input{
display: none;
}

#sliderLabel input:checked + #slider{
left: 0px;
}

#slider {
left: -50px;
position: absolute;
top: 0px;
-moz-transition: left .25s ease-out;
-webkit-transition: left .25s ease-out;
-o-transition: left .25s ease-out;
transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff {
display: block;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:10px;
height: 20px;
line-height: 20px;
position: absolute;
text-align: center;
top: 0px;
}
#sliderOn {
background: #3269aa;
background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3269aa), color-stop(100%, #82b3f4));
background: -webkit-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -o-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -ms-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: linear-gradient(top, #3269aa 0%, #82b3f4 100%);
color: white;
left: 0px;
width: 30px;
}
#sliderBlock {
background: #d9d9d8;
background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d8), color-stop(100%, #fcfcfc));
background: -webkit-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -o-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -ms-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 28px;
left: 30px;
width: 45px;
}
#sliderOff {
background: #f2f3f2;
background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8b8c8b), color-stop(50%, #f2f3f2));
background: -webkit-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -o-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -ms-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
color: #8b8b8b;
left: 65px;
width: 50px;
}
</style>
<script>
var beforeButton1Click = function(extraParams) {
if (!this.up('form').isValid())
return false;
Ext.ComponentQuery.query('checkboxgroup').forEach( function(item, index) {
if (item.isXType('checkboxgroup', true)) {
var count = 0;
extraParams['groups1[' + index + '].FieldLabel'] = item.fieldLabel;
Ext.ComponentQuery.query('checkbox', item).forEach(function(innerItem) {
if (innerItem.isXType('checkbox') && innerItem.checked) {
extraParams['groups1[' + index + '].CheckedItems[' + count + '].BoxLabel'] = innerItem.boxLabel;
count++;
}
});
}
});

Ext.ComponentQuery.query('radiogroup').forEach(fun ction(item, index) {
if (item.isXType('radiogroup', true)) {
var count = 0;
extraParams['groups2[' + index + '].FieldLabel'] = item.fieldLabel;
Ext.ComponentQuery.query('checkbox', item).forEach(function(innerItem) {
if (innerItem.isXType('radio') && innerItem.checked) {
extraParams['groups2[' + index + '].CheckedItems[' + count + '].BoxLabel'] = innerItem.boxLabel;
count++;
}
});
}
});

return true;
};

Ext.override(Ext.form.field.Checkbox, {

fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'{boxLabel} <label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"

'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="sliderLabel" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'<input type="checkbox" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<span id="slider"><span id="sliderOn">ON</span> <span id="sliderOff">OFF</span><span id="sliderBlock"></span></span>',
'</label>',
'{afterBoxLabelTpl}{boxLabel}',
'</tpl>',
{
disableFormats: true,
compiled: true
}

]
});
</script>
}
@section example
{
<h1>Simple Ext.NET Window Sample</h1>
<p>The following sample demonstrates how to configure a new Window Component and "show" the Window if closed.</p>

@(X.Button()
.Text("Show Window (Client Event)")
.Icon(Icon.Application)
.Handler("App.Window1.show();")
)

<br />

@(X.Button()
.Text("Show Window (Controller Action)")
.Icon(Icon.Application)
.DirectClickAction("Button2_Click")
)

@(X.Window()
.ID("Window1")
.Title("Hello World")
.Icon(Icon.Application)
.Height(185)
.Width(350)
.BodyStyle("background-color: #fff;")
.BodyPadding(5)
.Modal(true)
.Content(c => "This is my first <a target='_blank' href='http://www.ext.net/'> Ext.NET</a> Window.")
.Items(Html.X().Checkbox().FieldLabel("test"))
)
}

Daniil
Jun 18, 2013, 2:43 PM
Thank you for the sample, it is runnable and it does reproduce the error.

Though, please always simplify samples as much as you can. This one can be simplified to:

@Html.X().Checkbox()

The code above reproduces the error.

This doesn't:

@Html.X().Checkbox().BoxLabel("BoxLabel")

Looking at your overridden Checkbox's template, I see that your render an input element only if a BoxLabel is used. But an input element is required to get a CheckBox working. So, you have to change the template to render an input element regardless a BoxLabel or always use a BoxLabel.

pawangyanwali
Jun 19, 2013, 6:59 AM
Thank you so much for your help. I want to apply the same slider in checkbox of check column as well. Once you have told me that those are not the actual checkbox. Here I have overridden the property of checkbox. So how can I accomplish this one??

Can I achieve this with the help of Tpl property of Checkcolumn?

Daniil
Jun 19, 2013, 1:35 PM
The CheckColumn's JavaScript source is here:

trunk\Ext.Net\Build\Ext.Net\extnet\src\grid\column \CheckColumn.js

You will have to override its renderer and processEvent functions and tdCls, innerCls and, maybe, clickTargetName config options.


Can I achieve this with the help of Tpl property of Checkcolumn?

No, I won't help.

By the way, you can try with a common Column setting up a custom Renderer for it. Another approach is using a TemplateColumn.

At the moment, I don't know which one would be best for you.

pawangyanwali
Jun 20, 2013, 4:52 AM
By the way, you can try with a common Column setting up a custom Renderer for it.


Can you please explain this to me? I did't get it.

And I tried TemplateColumn like this. But it isn't working.



Html.X().TemplateColumn().MenuDisabled(true).Text("Check").TemplateString("<tpl if=\"{booleanCol}==true\"><input type=checkbox checked/></tpl>,<tpl if=\"{booleanCol}==false\"><input type=checkbox/></tpl>")


The whole file is here.


@(Html.X().GridPanel()
.Title("Column Variations")
.DisableSelection(true)
.Width(600)
.Height(350)
.Store(Html.X().Store()
.Model(Html.X().Model()
.Fields(
new ModelField("booleanCol", ModelFieldType.Boolean),
new ModelField("dateCol", ModelFieldType.Date),
new ModelField("numberCol", ModelFieldType.Int)
)
)
.DataSource(Model)
)
.ColumnModel(
Html.X().RowNumbererColumn(),
Html.X().BooleanColumn().DataIndex("booleanCol").Text("Boolean"),
Html.X().CheckColumn().DataIndex("booleanCol").Text("Check").Hidden(true),
Html.X().TemplateColumn().MenuDisabled(true).Text("Check").TemplateString("<tpl if=\"{booleanCol}==true\"><input type=checkbox checked/></tpl>,<tpl if=\"{booleanCol}==false\"><input type=checkbox/></tpl>"),
Html.X().DateColumn().DataIndex("dateCol").Text("Date"),
Html.X().NumberColumn().DataIndex("numberCol").Text("Number").Format("0.00"),
Html.X().TemplateColumn().MenuDisabled(true).Text("Template").TemplateString("<tpl for=\".\">{booleanCol}<br />{dateCol:date(\"d/m/Y\")}<br />{numberCol}<br /></tpl>")
)
.View(Html.X().GridView().StripeRows(true))
)

pawangyanwali
Jun 20, 2013, 7:33 AM
Thanx for you answer, I resolved it with the help of Renderer property of checkcolumn. Please close this thread.