hello..
1. add to my css file row from CheckHeader.css (ux exampes)
2. promote to class my column fCheck - and set UserClassName - CheckColumn, userAlias->ChkCol
Code:
Ext.define('MyApp.view.CheckColumn', {
extend: 'Ext.grid.column.Boolean',
alias: 'widget.ChkCol',
maxWidth: 100,
width: 45,
defaultWidth: 45,
dataIndex: 'fcheck',
text: '???.',
falseText: '????.',
trueText: '???.',
undefinedText: '????.',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
3. in Launch of Application :
Code:
Ext.define('MyApp.view.override.CheckColumn', {
override: 'MyApp.view.CheckColumn',
extend: 'Ext.grid.column.Column',
alias: 'widget.checkcolumn',
/**
* @cfg {Boolean} [stopSelection=true]
* Prevent grid selection upon mousedown.
*/
stopSelection: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
.... from CheckBox.js - Ux-examle
return '<div class="' + cls.join(' ') + '"> </div>';
}
});
in FireBug html View i can see style for this cell - override work - class x-grid-cell-checkcolumn was added:
Code:
<td class="x-grid-cell-checkcolumn x-grid-cell x-grid-cell-ChkCol-1061 x-grid-cell-last">
<div class="x-grid-cell-inner " style="text-align: left; ;">
????.
</div>
</td>
but renderer function from override class - not work and style check - uncheck not add
Code:
renderer : function(value){
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'];
if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
}
console.log( cls); // not in console
return '<div class="' + cls.join(' ') + '"> </div>';
}
have ideas?
thanks..