OK, i digged into the problem and I got the cause finally (f'ing extJS...)...to make it short, the problem appears when the TV's are not shown in a separate "Template Variables" tab but below the content instead (can be achieved by system setting tvs_below_content = 1)...if it's in the normal TVs tab, the checkboxSortableTV works also in 2.2.6!
Buuut, I don't like that TVs tab, so I tried for some kind of solution...I thought first, it should be just possible to just switch around the columns, ie show the checkbox col first, then the name col...but no way...I just don't get that extJS stuff^^...tried to move around the store data but couldn't achieve anything...so after an hour of console.log'ing the different objects in the checkboxsortable.tpl file (which contains the extjs) and trying various stupid things I now have at least a better way than resizing the browser window every time I want to see which items are active =D...it just does the grid.refreshView() thing when you click the the grid header...for now that's ok for me, but I would love to see a fix for that problem (why does it even exist??? ie the table is far too big for the viewport...?) better than mine, which means, just show the columns as everybody would expect^^...
enough speaking, here the changed checkboxsortable.tpl code, I commented where I changed, it's not a lot:
<div id="tv{$tv->id}-checkboxsortable"></div>
<script type="text/javascript">
// <![CDATA[
{literal}
Ext.onReady(function() {
// Populate the grid store
var store{/literal}{$tv->id}{literal} = new Ext.data.Store({
autoDestroy: true
,reader: new Ext.data.ArrayReader({}, [
{name: 'id'}
,{name: 'name'}
,{name: 'value'}
,{name: 'label'}
,{name: 'checked'}
])
,data: [{/literal}
{foreach from=$opts item=item key=k name=checkboxsortable}
{literal}[{/literal}
'tv{$tv->id}-{$k}'
,'tv{$tv->id}[]'
,'{$item.value}'
,'{$item.label|escape:"javascript"}'
,{if $item.checked}true{else}false{/if}
{literal}],{/literal}
{/foreach}
{literal}]
});
var grid = new CheckboxSortable.TV({
store: store{/literal}{$tv->id}{literal}
,renderTo: {/literal}'tv{$tv->id}-checkboxsortable'{literal}
,autoPlace: {/literal}{$params.autoplace}{literal}
});
// exside: even dirtyer workaround when tvs_below_content is set to true and the existing code doesn't show the checkboxes
// I would rather switch the position of the active checkbox and the name fiels (ie checkbox first column), but just couldn't do it =/
grid.on('headerclick', function() {
grid.refreshView()
});
// Dirty work around to resize the grid
// extended by exside to avoid undefined errors when tvs_below_content is set to true! maybe fixes IE error??
if ( Ext.getCmp('modx-resource-tabs') !== undefined ) {
var tabs = Ext.getCmp('modx-resource-tabs');
tabs.on('tabChange', function(elem, tab) {
{/literal}
{if $params.tab_ids}
var array = '{$params.tab_ids}'.split(',');
Ext.each(array, function(item, idx, list) {
list[idx] = item.trim();
});
array.push('modx-panel-resource-tv');
if (array.indexOf(tab.id) != -1) {
grid.refreshView();
}
{else}
// Default TV panel
if (tab.id == 'modx-panel-resource-tv') {
grid.refreshView();
}
{/if}
{literal}
if (tab.id == '{/literal}{$params.tab_ids}{literal}') {
grid.refreshView();
}
});
tabs.on('resize', function() {
grid.refreshView();
});
}
});
{/literal}
// ]]>
</script>
and if somebody knows how the heck I switch around the columns, I would appreciate to be enlightened =)!
[ed. note: exside last edited this post 13 years, 6 months ago.]
☆ A M B ☆
