[CLOSED] Override checkbox behavior

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Override checkbox behavior

    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?
    Last edited by Daniil; Jun 20, 2013 at 9:29 AM. Reason: [CLOSED]
  2. #2
    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/s...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.
  3. #3

    overridng "fieldSubTpl"

    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/...thods-for.html

    Can I do the same thing in case of overriding "fieldSubTpl" of checkbox???
  4. #4
    Yes, you can use the Ext.override function to do it.
  5. #5

    Result

    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.
    Last edited by pawangyanwali; Jun 13, 2013 at 11:47 AM.
  6. #6
    Quote Originally Posted by pawangyanwali View Post
    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".

    Quote Originally Posted by pawangyanwali View Post
    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.

    Quote Originally Posted by pawangyanwali View Post
    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.
  7. #7

    Requirement

    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.
    Last edited by pawangyanwali; Jun 14, 2013 at 5:10 AM.
  8. #8

    Please Close this thread

    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-...xt.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.
    Last edited by pawangyanwali; Jun 14, 2013 at 8:55 AM.
  9. #9
    What is a test case?
  10. #10

    Full Test Case

    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.

    Click image for larger version. 

Name:	Untitled.png 
Views:	20 
Size:	25.8 KB 
ID:	6375
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Mar 26, 2013, 2:09 AM
  2. Replies: 15
    Last Post: Mar 08, 2013, 2:08 AM
  3. Calendar Override
    By Avatarus in forum 1.x Help
    Replies: 1
    Last Post: Sep 28, 2012, 1:18 PM
  4. Replies: 1
    Last Post: Oct 21, 2011, 6:15 PM
  5. how to override in formpanel ?
    By jhenriquecosta in forum 1.x Help
    Replies: 1
    Last Post: Feb 08, 2010, 11:04 AM

Posting Permissions