Develop Reference

Ext JS Checkbox in Roweditor

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

ExtJS 3.0.0: GridPanel in a Window with an ArrayStore not rendering any data

I'm trying to put a GridPanel powered by an ArrayStore in a Window, but no matter what I do, it just looks like this with no data rows inside:
Here's my code:
var ticketsStore = new Ext.data.ArrayStore
(
{
autoDestroy: false,
remoteSort: false,
data: result,
fields:
[
{ name: 'articleId', type: 'int' },
{ name: 'heatTicketRef', type: 'string' },
{ name: 'username', type: 'string' },
{ name: 'dateLinked', type: 'date' }
]
}
);
var ticketsGrid = new Ext.grid.GridPanel({
store: ticketsStore,
id: this.id + 'ticketsGrid',
viewConfig: {
emptyText: 'No data'
},
autoShow: true,
idProperty: 'heatTicketRef',
columns: [
{ id: 'heatTicketRef', header:"Ticket ID", width: 100, dataIndex: 'heatTicketRef', sortable: false },
{ header: "User", width: 100, dataIndex: 'username', sortable: false },
{ header: "Date Linked", width: 100, dataIndex: 'dateLinked', xtype: 'datecolumn', format: 'j M Y h:ia', sortable: false }
]
});
var window = new Ext.Window
(
{
renderTo: Ext.getBody(),
id: this.id + 'linkedHeatTickets',
closable: true,
modal: true,
autoHeight: true,
width: 500,
title:'Linked Heat Tickets',
resizable: false,
listeners:
{
close: function () { // do something }
},
items:
{
style: 'padding:5px;',
items: ticketsGrid
},
buttons:
{
text: 'Close',
handler: function () {
window.close();
}
}
}
);
window.show();
When I debug, I can see that my "result" object is healthy and the ArrayStore is of the right length:
But the GridPanel doesn't like the data because it's not in its items (although it's in the store) array:
What little thing have I done wrong?
Thanks!

Because I'm an idiot... I used an ArrayStore instead of a JsonStore!

Grid Updates (Row Editing) in Extjs takes more time when Number of records in the grid increases

As the number of records in the grid increases the time taken to update one row also increases.
Initially when I fetch 25 records the time taken to update is 2-3 seconds.
When I fetch 500 records on the same page time taken is 8-9 seconds.
Can anyone help me please so that I can avoid this. It is degrading the performance of the system.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);
Ext.onReady(function(){
// Define our data model
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
{ name: 'start', type: 'date', dateFormat: 'n/j/Y' },
{ name: 'salary', type: 'float' },
{ name: 'active', type: 'bool' }
]
});
// Generate mock employee data
var data = (function() {
var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
lastLen = lasts.length,
firstLen = firsts.length,
usedNames = {},
data = [],
eDate = Ext.Date,
now = new Date(),
s = new Date(now.getFullYear() - 4, 0, 1),
end = Ext.Date.subtract(now, Ext.Date.MONTH, 1),
getRandomInt = Ext.Number.randomInt,
generateName = function() {
var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
if (usedNames[name]) {
return generateName();
}
usedNames[name] = true;
return name;
};
while (s.getTime() < end) {
var ecount = getRandomInt(0, 2);
for (var i = 0; i < ecount; i++) {
var name = generateName();
data.push({
start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
name : name,
email: name.toLowerCase().replace(' ', '.') + '#sencha-test.com',
active: getRandomInt(0, 1),
salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
});
}
s = eDate.add(s, eDate.MONTH, 1);
}
return data;
})();
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'DESC'
}]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
width: 135,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}, {
xtype: 'numbercolumn',
header: 'Salary',
dataIndex: 'salary',
format: '$0,0',
width: 130,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Active?',
dataIndex: 'active',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}],
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new#sencha-test.com',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
new Ext.window.Window({
width: 900,
height: 500,
title: 'Employee Salaries',
items: grid,
layout: 'fit',
closable: false
}).show();
});

Multi Line Text Area In Editor ExtJs

I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this:
Example :
" Wrong list:
asdasdasd
asdasdasdas"
Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"
What i must to do with my js?
This is the grid i have:
This is the code :
var chat_grid = Ext.create('Ext.grid.Panel', {
id: 'chatGrid',
store: SuratPesananChatDetailStore,
height: 350,
title: 'Comment Grid',
viewConfig: {
emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
getRowClass: function (record, rowIndex, rp, store) {
return 'rowgridspdetailnonstd-height';
}
},
plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
frame: true,
loadMask: true,
stripeRows: true,
autoScroll: true,
selModel: GridChatSelectionModel,
cls: 'rowgridspdetailnonstd-height',
tbar:
[
{
id: "IdAddCommentLookUp",
text: "Add Comment",
iconCls: "icon-grid-add",
listeners:
{
'click': function () {
AddCommentListener();
}
}
},
{
id: "IdDeleteChat",
text: "Delete Comment",
iconCls: "icon-cancel",
disabled: true,
listeners:
{
'click': function () {
DeleteChatListener();
}
}
},
{
id: "IdInviteUser",
text: "Invite User",
iconCls: "icon-grid-add",
hidden: true,
listeners:
{
'click': function () {
InviteUserLookUp();
}
}
}
],
columns:
[
{
header: 'Date',
dataIndex: 'CreatedOn',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Comment',
dataIndex: 'Comment',
editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
hidden: false,
width: 370,
sortable: false,
sortableColumn: false
},
{
header: 'Created By',
dataIndex: 'CreatedBy',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Department',
dataIndex: 'Department',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Document Name',
dataIndex: 'FileName',
width: 150,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Upload Document',
dataIndex: 'Panel',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false,
renderer: function (v, m, r, row) {
if (r.data.Panel == 'Download') {
var fileName = r.data.FilePath;
return "" + v + "";
}
else if (r.data.Panel == 'Upload') {
return "" + v + "";
}
else {
return v;
}
}
}
]
});
I have try all the way in google but i can't solve this case.

Enable keyevents of your comment editor, and stopEvent() in Enter key
Sample config:
editor: {
xtype: 'textareafield',
allowblank: false,
maxLength: 165,
enforceMaxLength: true,
height: 100,
grow: true,
completeOnEnter: false,
enableKeyEvents: true, //Listen to keyevents
listeners: {
keydown: function(field, e) {
if (e.getKey() == e.ENTER) {
e.stopEvent(); // Stop event propagation
}
}
}
}
Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter

Why doesn't this checkbox column work in this ExtJS grid?

The following ExtJS grid worked until I put the checkbox column in it, now I get this error:
I based the checkbox column code on this code.
What do I need to do to get the checkbox column to work?
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
[16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, false, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'boolean'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
},
{
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
},
{
xtype: 'checkcolumn',
header: 'Test',
dataIndex: 'rank',
width: 55
},
{
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});

You get this error because you have not included the CheckColumn extension. You can get the extension from : http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js .. include it and you should be able to remove the error..