PDA

View Full Version : [2.x] Tri-state checkbox and themed checkbox and radio



Condor
1 Mar 2008, 12:15 PM
I know several of you have been waiting for this extension:

Tri-state checkbox and themed checkbox and radio components:

http://img391.imageshack.us/img391/7882/examplenz2.gif

The attachment contains all needed files and an example.

Know issues:
Ext.ux.form.Radio currently ONLY works with the ext-base.js adapter.

Remarks:
- TriCheckbox is actually a multi-state checkbox. You can supply values and checkedCls arrays in the config with values and CSS classes for every state.
- Does somebody have better looking grayed checkbox images?

dantheman
3 Mar 2008, 2:05 PM
How will this play under a non-Ext theme (eg Slate)?

--dan

Condor
3 Mar 2008, 9:26 PM
The checkbox images are blue'ish. You might want to change them to gray.

The CSS also assumes a line-height of 13. For a smaller line-height you will have to adjust the CSS and the images, for a bigger line-height you can just add margins in the CSS.

Condor
8 Mar 2008, 7:16 AM
I was reading the Ext roadmap thread (http://extjs.com/forum/showthread.php?t=26307) and noticed the request for tri-state checkboxes.

Since I already made the themed checkbox adding tri-state support wasn't that hard.

(I updated my original post with the new code)

jay@moduscreate.com
8 Mar 2008, 8:13 AM
Excellent work Condor :)

SeaSharp2
10 Mar 2008, 3:40 PM
Looking at the screen shots I do not understand how the tri-state will behave. Going by another Winform library I reckon the most intuitive behavior is:

Classic unchecked.
Classic checked.
Uniform mid-dark grey block.

Three clicks should cycle through those 3 states. Is this how the new Ext implementation works.

Condor
10 Mar 2008, 11:04 PM
Three clicks should cycle through those 3 states. Is this how the new Ext implementation works.

Yes.

The only problem is that I don't have good images of a grayed checkbox.
If somebody could provide those I would gladly replace my images (I need normal, focussed, down and disabled state images).

SeaSharp2
13 Mar 2008, 3:58 PM
I would gladly replace my images (I need normal, focussed, down and disabled state images).
Just wanted to clarify my view on what a tri-state checkbox is about. The 3rd state is "not declared" which is different to a state of disabled.

gjain
8 Jan 2009, 1:42 PM
There seems to be a bug in this extension. The check event is getting blocked. So if I add a listener for the check event, it never gets called. Has someone else experienced this?

Tx

Condor
8 Jan 2009, 2:54 PM
I abandoned this project when Ext 2.2 came out. Which version of Ext JS are you using?

gjain
8 Jan 2009, 3:06 PM
I am using 2.2


I abandoned this project when Ext 2.2 came out. Which version of Ext JS are you using?

Condor
9 Jan 2009, 1:09 AM
Ext 2.2 already has themed checkboxes and radios, so you don't need this extension.

It does however have some bugs (fixes for all problems known to me can be found here (http://extjs.com/forum/showthread.php?t=44603)).

HarryC
14 Apr 2009, 7:40 AM
Colour me daft but I cannot for the life of me work out how to use tri-state checkboxes using 2.2. There's no sample and the docs don't seem to mention how to do it. Can someone point me in the right direction or provide a little snippet of code. Many thanks.

Condor
14 Apr 2009, 8:00 AM
I'm sorry, but this extension only works for Ext version 2.0 and 2.1.

HarryC
14 Apr 2009, 8:27 AM
Well at least I'm not (totally) stupid and wasn't missing something obvious. So there's currently no tri-state checkbox control for the current version of Ext?

Is there some workaround people recommend for this functionality?

Condor
14 Apr 2009, 8:32 AM
In principle the extension should also work for Ext 2.2, but the Ext.form.Checkbox code changed a lot between Ext 2.1 and 2.2, so you would need to adapt a lot of code of the extension to match the changed Ext 2.2 code.

gerry
12 May 2009, 10:01 AM
Has anyone implemented a tri-state checkbox for 2.2 or 3.0?

Gerry

vtswingkid
25 Jun 2009, 8:44 AM
I needed a working tri-state check box for 2.2, I used the existing ideas but built it off the ext checkbox instead.

It is attached.

johnmmr
23 Oct 2009, 9:09 AM
vtswingkid, great control. I'm having a bit of trouble getting it to work in 3.0 though. It initializes with the correct value, but the click event doesn't seem to be working.

Thanks.

jsakalos
12 Jan 2010, 3:46 PM
Hello Condor,

seems like I'm going to need a tristate checkbox in 3.1+. Any chance for you to take the project up again and port it, or to write something from scratch, to Ext 3.1+?

mbajema
30 Jan 2010, 9:29 AM
I too am in need of a tri-state checkbox for Ext 3.x. Has anyone had time to create one? Saki--did you find/make something?

jsakalos
30 Jan 2010, 4:20 PM
No, I've done it otherwise: with menu Yes, No and Don't Care, however, tristate checkbox would be more elegant.

j.bruni
4 May 2010, 11:44 AM
Hey, guys,

I was required to implement a TreePanel with tri-state checkboxes. I thought I would find it already made. Well... it was almost made... I have just tweaked the current Ext.tree.TreeNodeUI a bit... and the issue was resolved (at least for my own needs).

The results are shared in this new thread (http://www.extjs.com/forum/showthread.php?98442), linking to the "live demo" in my own website (http://www.jbruni.com.br/extjs-tristate/).

I would love to receive feedback from you! Thanks!

@Condor: I used the checkboxes images I found in your extension - thanks again.

jsakalos
4 May 2010, 11:50 AM
I can hardly distinguish between checked and "don't know". Maybe a little question mark or something else to make it clearly visible that it is in "don't know" state.

j.bruni
5 May 2010, 2:31 AM
I can hardly distinguish between checked and "don't know". Maybe a little question mark or something else to make it clearly visible that it is in "don't know" state.

Sorry.

Anyway, it is very easy to modify the visualization of the checkboxes. Take a look at the single GIF image that contains all the three states images. (http://www.jbruni.com.br/extjs-tristate/checkboxes.gif) Each state is a 13 x 13 pixels square. The whole image is 13 x 39 pixels. Just open your favorite image editor software and draw the question mark that best suits your needs. :)

Sincerely, I would have made them for you if I had the minimum designer skills...

Thanks for the feedback!

jsakalos
5 May 2010, 5:41 AM
That I know, I just think that it could be better OOTB.

j.bruni
5 May 2010, 6:37 AM
That I know, I just think that it could be better OOTB.

Ok. You won. :)

Just found this image (http://www.infragistics.com/uploadedImages/Products/NetAdvantage_for_ASPNET/Features/WebDataTree/Gallery/WDTCheckBoxes.jpg). I will change the "don't know" state image for that one with the square...

Thanks! I learned a new acronym, and the thing will be slightly better "OOTB".

j.bruni
5 May 2010, 6:46 AM
Done... I hope you appreciate! :-)

jsakalos
5 May 2010, 6:47 AM
Excellent! Muuuuuuuuuuuch better.

xavxav
16 Nov 2010, 6:05 AM
Hi,
I have tried to set up this 3 state checkbox in a toolbar. but the 3 state checkbox appears in a the rightest position and without the fieldLabel is not displayed. I use Ext-JS 3.1.1.
I have found a solution in this thread :http://www.sencha.com/forum/showthread.php?98241-Tri-state-checkbox-for-ExtJs-3.0
Regards,
Xavier

MyAlias
25 Apr 2013, 2:43 AM
good,It's what I want! thanks