PDA

View Full Version : Ext.ux.form.TriCheckbox



ontho
28 Jun 2011, 7:10 AM
Okay, not tested very much till now, but perhaps already of some use: A first approach for an Ext.ux.form.TriCheckbox for ExtJs 4.

To spare an extra css, I create the style-information dynamically.

Every feedback is welcome, I would be glad if some of the professionals may have a look.

Thanks to Condor, I got some ideas from http://extjs.com/forum/showthread.php?t=28096



// Add style for "null"-value dynamically
var sStyle = '.x-checkbox-null input {\n';
sStyle += '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";\n';
sStyle += 'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);\n';
sStyle += 'opacity:.5;}';
Ext.util.CSS.createStyleSheet(sStyle, 'Ext.ux.form.TriCheckbox');

// Define class Ext.ux.form.TriCheckbox
Ext.define('Ext.ux.form.TriCheckbox',
{ extend: 'Ext.form.field.Checkbox',
alias: ['widget.xtricheckbox', "widget.tri-checkbox"],

triState: true, // triState can dynamically be disabled using enableTriState

values: ['null', '0', '1'], // The values which are toggled through
checkedClasses: ['x-checkbox-null', '', Ext.baseCSSPrefix + 'form-cb-checked'], // The classes used for the different states

currentCheck: 0, // internal use: which state we are in?

getSubmitValue: function()
{ return this.value;
},

getRawValue: function()
{ return this.value;
},

getValue: function()
{ return this.value;
},

initValue: function()
{ var me = this;
me.originalValue = me.lastValue = me.value;
me.suspendCheckChange++;
me.setValue(me.value);
me.suspendCheckChange--;
},

setRawValue: function(v)
{ var me = this;

if (v === false) v = '0';
if (v === true) v = '1';
if (v == null || v == '' || v === undefined)
{ if (!this.triState)
v = '0';
else v = 'null';
}

var oldCheck = me.currentCheck;
me.currentCheck = me.getCheckIndex(v);
me.value = me.rawValue = me.values[me.currentCheck];

// Update classes
var inputEl = me.inputEl;
if (inputEl)
{ inputEl.dom.setAttribute('aria-checked', me.value == '1'?true:false);
me['removeCls'](me.checkedClasses[oldCheck])
me['addCls'](me.checkedClasses[this.currentCheck]);
}
},

// Returns the index from a value to a member of me.values
getCheckIndex: function(value)
{ for (var i = 0; i < this.values.length; i++)
{ if (value === this.values[i])
{ return i;
}
}
return 0;
},

// Handels a click on the checkbox
onBoxClick: function(e)
{ this.toggle();
},

// Switches to the next checkbox-state
toggle: function()
{ var me = this;
if (!me.disabled && !me.readOnly)
{ var check = me.currentCheck;
check++;
if (check >= me.values.length) check = 0;
this.setValue(me.values[check]);
}
},

// Enables/Disables tristate-handling at runtime (enableTriState(false) gives a 'normal' checkbox)
enableTriState: function(bTriState)
{ if (bTriState == undefined) bTriState = true;
this.triState = bTriState;
if (!this.triState)
{ this.setValue(this.value);
}
},

// Toggles tristate-handling ar runtime
toggleTriState: function()
{ this.enableTriState(!this.triState);
}
});

morfeusz
28 Jun 2011, 9:12 AM
Very good extension!
I can even set different states.
I have [0,1,2] and it`s work.
Thanks.

morfeusz
3 Jul 2011, 8:16 AM
How to set default value?
value, inputValue and checked don`t work.

Now I use this:
listeners:{render:function(v){v.setValue(myVar)}}

But it`s not good solve.

ontho
3 Jul 2011, 10:46 AM
Hi morfeusz,

you are right: It wasn't possible to set a default-value. I added a initValue: function() in the code above, but I'm not able to test it today, please give me some feedback if this works for you.

morfeusz
3 Jul 2011, 11:12 AM
Thanks for answer.
How can I use this function?

ontho
3 Jul 2011, 11:16 AM
Sorry: I fixed the code in the 1st post of this thread - just use the code there.

morfeusz
3 Jul 2011, 11:23 AM
Its not help.
I use code like this


{
xtype:'tri-checkbox',
boxLabel:'Label',
value:1 // or '1' or 0 or '0'
}

and its init with null value

ontho
4 Jul 2011, 12:08 AM
Thanks again for your feedback. I got some time this morning and changed the code above again - please try it. It now works for me with: value: '1' (you need to set the value and type of the value to match one value of "values".)

morfeusz
4 Jul 2011, 1:20 AM
Now it`s work perfect.
Thanks for help.

arcade
27 Sep 2011, 10:20 AM
When you disable the tri-state checkbox, the checkbox doesn't behaves as a "normal" checkbox (two states).

Here is a fix.



// Switches to the next checkbox-state
toggle: function() {
var me = this;
if (!me.disabled && !me.readOnly) {
var check = me.currentCheck;
check++;
if (check >= me.values.length) {
check = (me.triState == false) ? 1 : 0;
}
this.setValue(me.values[check]);
}
}

ontho
27 Sep 2011, 11:27 PM
@arcade: Thanks a lot!

Snahrck
11 Feb 2012, 4:36 PM
How can I use my own gif with this checkbox?

31626

I tried to use the css defined by Condor and point the checkedClasses to it but it didn't work:


checkedClasses: ['x-checkbox-undef', 'x-item-disabled', 'x-checkbox-checked']



.x-form-tscheckbox {
height: 13px;
width: 13px;
background: url('checkbox.gif') no-repeat 0 0;
vertical-align: bottom;
}
.x-checkbox-checked .x-form-tscheckbox {
background-position:0 -13px;
}
.x-checkbox-undef .x-form-tscheckbox {
background-position:0 -26px;
}
.x-item-disabled .x-form-tscheckbox {
background-position:-39px 0;
}
.x-form-check-over .x-form-tscheckbox {
background-position: -13px 0;
}
.x-form-check-down .x-form-tscheckbox {
background-position:-26px 0;
}
.x-checkbox-checked .x-form-check-over .x-form-tscheckbox {
background-position:-13px -13px;
}
.x-checkbox-checked .x-form-check-down .x-form-tscheckbox {
background-position:-26px -13px;
}
.x-checkbox-checked.x-item-disabled .x-form-tscheckbox {
background-position:-39px -13px;
}
.x-checkbox-undef .x-form-check-over .x-form-tscheckbox {
background-position:-13px -26px;
}
.x-checkbox-undef .x-form-check-down .x-form-tscheckbox {
background-position:-26px -26px;
}
.x-checkbox-undef .x-item-disabled .x-form-tscheckbox {
background-position:-39px -26px;
}

johniman
22 Jul 2013, 1:15 AM
How can I set checkbox values(states) on this checkboxes? I mean - can I send list of checkboxes, that needs to be checked and them will be check?