does anybody know how to set the checkbox in a RowEditor into the center position? I use the theme "triton" with Ext JS 6.0.0.
The checkbox is placed to the top of the row, but the other fields like textfield or combobox are placed to center.
It looks like:
i already set the style object of the checkbox to align: center
but it didn't work.
plugins: { ptype: 'rowediting', clicksToEdit: 2, saveBtnText: 'Übernehmen', cancelBtnText: 'Abbrechen' },
initComponent: function() {
var me = this;
me.store = 'MeasurementPoint';
me.columns = [
{
xtype: 'actioncolumn',
width: 50,
sortable: false,
hideable: false,
resizable: false,
menuDisabled: true,
draggable: false,
items: [
{
icon: 'Content/images/icon_32/garbage.png',
tooltip: 'Löscht den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
Ext.Msg.show({
title: 'Löschen bestätigen!',
msg: 'Soll der Messpunkt \"' + record.data.Name + '\" wirklich gelöscht werden?',
width: 300,
buttons: Ext.Msg.YESNO,
fn: function(btn) { if (btn === 'yes') view.ownerCt.getStore().remove(record); },
//animateTarget: rowIdx,
icon: Ext.window.MessageBox.QUESTION
});
}
},
{
icon: 'Content/images/icon_32/pencil.png',
tooltip: 'Bearbeitet den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
if (this.__form)
return;
this.__form = Ext.widget('window', {
layout: 'fit',
width: 500,
title: 'Messpunkt bearbeiten',
items: { xtype: 'measurementpointform', header: false },
}).show();
this.__form.down('button[itemId=save-measurementpoint]').action = 'update-measurementpoint';
this.__form.down('form').loadRecord(record);
this.__form.on('close', function() { this.__form = false }, this, { single: true });
}
}
]
},
{
xtype: 'gridcolumn',
dataIndex: 'Active',
text: 'Aktiv',
width: 70,
renderer: AWA.ImageRenderer.CROSS,
editor: {
xtype: 'checkbox',
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Manually',
text: 'Manuell',
width: 90,
renderer: AWA.ImageRenderer.TICK,
editor: {xtype: 'checkbox'}
}
Thank you guys for helpful anwers
I have overwritten the CSS and it works for me
.x-grid-editor .x-form-cb-wrap {
vertical-align: middle;
}
Thanks
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.