PDA

View Full Version : [Ext-3.3.0] Checkbox won't change state in HtmlEditor toolbar



danellison
8 Jul 2011, 10:24 AM
Greetings. I am attempting to place a checkbox into the toolbar of an HtmlEditor panel. I can get it there no problem. However, when I check/uncheck it it doesn't appear to change. SIngle stepping through the code reveals that in fact it is changing state and then mysteriously changing right back after the handler call is completed.

The checkbox is created like this:


COI.checkBox = function(args){
// require an id for any checkbox
if(Ext.isEmpty(args.id)) return false;
var cmp = args.cmp;
if(Ext.isFunction(cmp.getToolbar)) var tb = cmp.getToolbar();
else var tb = cmp.getTopToolbar();
var cb = new Ext.form.Checkbox({
checked: args.checked,
handler: args.handler,
scope: args.scope || this
});
if(args.position) tb.insert(args.position, cb);
else tb.add(cb);
}

It is then instantiated in the HtmlEditor plugins array like this:


new COI.checkBox({
id: json.pname+'cb',
cmp: this,
checked: Ext.getCmp('COIMIMinutesItemsGrid').autoSaveMinutes,
handler: function(cb, checked){
var g = Ext.getCmp('COIMIMinutesItemsGrid');
if(checked) {
g.autoSaveMinutes = true;
} else {
g.autoSaveMinutes = false;
}
return false;
},
scope: this
}),


The stack trace looks like this:

handler(cb=Object { initialConfig={...}, checked=false, more...}, checked=false) COI_Viewport.js (line 373)
setValue(v=false)ext-all-debug.js (line 41896)
onClick()ext-all-debug.js (line 41879)
h(e=Object { browserEvent=Event focus, button=-1, more...})ext-all-debug.js (line 4615)

Given a starting state of checked what I see is this. The setValue call does actually clear the checkbox as it should. I set my global control flag in my handler and return false. Everthing is good until the stack pops back to the anonymous function h. When program control returns from this method the checkbox is once again CHECKED. I don't understand what is happening here.

Any insight would be greatly appreciated. Can't find any stopEvent method. Returning false of true doesn't matter. Thanks in advance - help greatly appreciated.

Dan

danellison
11 Jul 2011, 6:44 AM
After some further research into this I have discovered that this anomoly only occurs when the checkbox is placed into the HtmlEditor toolbar. If I place the checkbox into the containing panel the check/uncheck behavior is correct. So given the following config:



COI.toolbarText = function(args){
var cmp = args.cmp;
if(Ext.isFunction(cmp.getToolbar)) var tb = cmp.getToolbar();
else var tb = cmp.getTopToolbar();
if(args.position) tb.insert(args.position, new Ext.Toolbar.TextItem(args.text));
else tb.add(new Ext.Toolbar.TextItem(args.text));
}

COI.checkBox = function(args){
// require an id for any checkbox
if(Ext.isEmpty(args.id)) return false;
var cmp = args.cmp;
if(Ext.isFunction(cmp.getToolbar)) var tb = cmp.getToolbar();
else var tb = cmp.getTopToolbar();
var cb = new Ext.form.Checkbox({
id: args.id,
checked: args.checked || false,
handler: args.handler,
scope: args.scope || this
});
if(args.position) tb.insert(args.position, cb);
else tb.add(cb);
}

var p = new Ext.Panel({
layout: 'fit',
id: json.pname,
height: 530,
plugins: [],
tbar: [],
listeners: {
show: function() {
var state = Ext.getCmp('COIMIMinutesItemsGrid').autoSaveMinutes,
cbid = this.id+'cb',
cb = Ext.getCmp(cbid);
/* is this the first time? return if true */
if(Ext.isEmpty(cb)) return;
cb.setValue(state);
},
render: function(){
Ext.apply(this, {plugins: [
new COI.toolbarText({
cmp: this,
text: 'Auto save on item change: '
}),
// this checkbox behaves as it should, check and uncheck per normal
new COI.checkBox({
id: json.pname+'cb',
cmp: this,
checked: true,
handler: function(cb, checked){
var g = Ext.getCmp('COIMIMinutesItemsGrid');
if(checked) {
g.autoSaveMinutes = true;
} else {
g.autoSaveMinutes = false;
}
return false;
}
})
]});
}
},
items: [
new Ext.form.HtmlEditor({
ref: 'editor',
layout: 'fit',
extraCls: 'coiminuteseditor',
id: json.pname+'-editor',
dirty: false,
enableAlignments: false,
enableColors: false,
enableFont: false,
enableFontSize: false,
enableFormat: false,
enableLinks: false,
enableLists: false,
enableSourceEdit: false,
plugins: [
new Ext.ux.form.HtmlEditor.ClearEditor(this),
new Ext.ux.form.HtmlEditor.WordWin(this)
],
value: json.data || '',
listeners: {
beforesync: markDirty,
show: function(ed){
ed.focus(false, 250);
},
afterrender: function(){
Ext.apply(this, {plugins: [
new COI.toolbarText({
cmp: this,
text: 'Auto save on item change: '
}),
// but this one does NOT hold state change
new COI.checkBox({
id: json.pname+'cb',
cmp: this,
// id: 'coimiminutesautosave',
checked: true,
handler: function(cb, checked){
var g = Ext.getCmp('COIMIMinutesItemsGrid');
if(checked) {
g.autoSaveMinutes = true;
} else {
g.autoSaveMinutes = false;
}
return false;
}
}),
new COI.Plugin({
cmp: this,
icon: 'delete.png',
handler: this.deleteMinutes,
tooltip: 'Delete the minutes for the current item.',
overflowText: 'Delete the minutes for the currently selected item.'
})
]});
}
},
onMinutesSave: function(arg){
arg = arg || '';
var data = this.editor.getValue(),
key = this.getId();
function myHandler(json, e){
if(json.success && e.status){
this.editor.dirty = false;
this.editor.on('beforesync', markDirty, this.editor);
if(json.msg) alert(json.msg);
}
}
function myQuietHandler(json, e){
if(arg != 'quiet'){
if(json.success && json.msg){
alert(json.msg);
}
}
if(json.message){
alert(json.message);
}
}
if(arg == ''){
COI.minuette.updateMinutes(data, key, COI.sessID, myHandler, this);
} else {
COI.minuette.updateMinutes(data, key, COI.sessID, myQuietHandler, this);
}
},
deleteMinutes: function() {
var p = Ext.getCmp('COIMIMinutesItemsGrid'),
r = p.getSelectionModel().getSelected();
},
previewMinutes: function(){
function myHandler(json, e){
if(json.success && COI.sessID==json.sessid){
if(json.src) {
var h = Ext.urlEncode({src: json.src, sessid: COI.sessID});
window.open('mpdf.php?'+h);
}
}
}
var m = Ext.getCmp('COIMI').miGetSelected(),
mid = m.data.id;
COI.minuette.createMinutes(mid, COI.sessID, myHandler, this);
},
previousItemShow: function(){
Ext.getCmp('COIMIMinutesItemsGrid').getSelectionModel().selectPrevious();
},
nextItemShow: function(){
Ext.getCmp('COIMIMinutesItemsGrid').getSelectionModel().selectNext();
}
})
]
});


I could really use some assistance in resolving this issue if anybody has any ideas. I really appreciate it. Moving the checkbox to the container is not an option in this case.

Thanks in advance,
Dan

danellison
11 Jul 2011, 7:29 AM
The HtmlEditor has this block of code present in its createToolbar method :



// stop form submits
this.mon(tb.el, 'click', function(e){
e.preventDefault();
});


Overriding the createToolbar method and removing this event handler allows the checkbox to be toggled as it should. Not sure yet what "other" effects this might have but in my application I don't think it is an issue. Time will tell.

Dan