PDA

View Full Version : EditorGridPanel with always empty row at the end



Fallen Zen
27 May 2010, 4:51 AM
Hey everyone,

I currently have an EditorGridPanel with 2 columns, one with people's names and the other with delete button. What's the best way to start the editor with an empty row and then adding one after the previous one has been filled with data (ComboBox editor)?

I have something like this to create an empty row, is this ok?

var r = new (Ext.getCmp('participants-grid').getStore().recordType)({
id: 1,
name: ''
});
Ext.getCmp('participants-grid').getStore().add(r);

I know many of you made something like this.

Thanks for any help,
Peter

Condor
27 May 2010, 5:18 AM
Example:

new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'editorgrid',
store: new Ext.data.ArrayStore({
fields: [
{name: 'id', allowBlank: false},
{name: 'name', allowBlank: false}
],
data: [
[null, null]
],
listeners: {
update: function(store, record, type){
if(type == Ext.data.Record.EDIT &&
record.isValid() &&
store.indexOf(record) == store.getCount() - 1) {
store.add(new store.recordType({id: null, name: null}));
}
}
}
}),
columns: [
{header: 'ID', dataIndex: 'id', editor: new Ext.form.NumberField({allowBlank: false})},
{header: 'Name', dataIndex: 'name', editor: new Ext.form.TextField({allowBlank: false})}
],
clicksToEdit: 1
}
});

Fallen Zen
27 May 2010, 6:19 AM
Thanks Condor, it's working :)

Fallen Zen
30 May 2010, 1:48 PM
Hey Condor,

One more question. What's the best way to have the delete button appear only in previously edited rows? I don't want people to remove empty one. Putting a script in the renderer section is not the best option, right?



{
xtype: 'editorgrid',
region: 'center',
id: 'participants-grid',
border: false,
enableColumnResize: false,
width: 140,
layout: 'fit',
clicksToEdit: 1,
viewConfig: {
autoFill: true
},
store: new Ext.data.ArrayStore({
fields: [
{name: 'name'},
{name: 'delete'}
],
data: [
[null, null]
],
listeners: {
update: function(store, record, type){
if(type == Ext.data.Record.EDIT &&
record.isValid() &&
store.indexOf(record) == store.getCount() - 1) {
store.add(new store.recordType({id: null, name: null}));
}
}
}
}),
columns: [
{header: 'Uczestnicy', dataIndex: 'name', width: 100, sortable: true, menuDisabled: true, editor: new Ext.form.ComboBox({typeAhead: true, triggerAction: 'all', store: bookingUserStore, displayField:'name', mode: 'local'})},
{header: 'Usu?', dataIndex: 'delete', width: 40, menuDisabled: true, sortable: false, renderer: function(record, rowIndex){return '<div><img src="resources/images/scheduler/delete.png" class="clickableImage deleteImage" /></div>';}}
]
}

mitchellsimoens
30 May 2010, 6:28 PM
tried using a renderer? Grids are really designed to hold components although it's been done.

Condor
31 May 2010, 2:23 AM
Indeed, use a renderer to display the delete image, except for the last row (but I would use a background image instead of an actual <img> tag). Next, write a cellclick event handler that deletes the row if the delete image was clicked.

Fallen Zen
31 May 2010, 2:28 AM
Indeed, use a renderer to display the delete image, except for the last row (but I would use a background image instead of an actual <img> tag). Next, write a cellclick event handler that deletes the row if the delete image was clicked.

I previously had an initEvent for the delete image, just wondering how to ommit the last row in the renderer:



initEvents: function(){
Ext.getCmp('participants-grid').on('cellclick', function(grid, rowIndex, columnIndex, e){
var deleteColumnIndex = Ext.getCmp('participants-grid').getColumnModel().getIndexById('delete');

if(columnIndex == deleteColumnIndex) {
var record = Ext.getCmp('participants-grid').getStore().getAt(rowIndex);
Ext.getCmp('participants-grid').getStore().remove(record);
}
})
}

Condor
31 May 2010, 3:37 AM
renderer: function (v, meta, r, row, col, store) {
if (row < store.getCount - 1) {
meta.css = 'delete-img';
}
}
(don't forget to include the same check in the cellclick handler)

Fallen Zen
31 May 2010, 5:30 AM
Says rowIndex is not defined. One more thing came out, when I changed xtype from grid to editorgrid. With initEvents ComboBox editor is not appearing after a click. Deleting still works fine. Without initEvents ComboBox is ok. Help guys! :)

Here's my code thus far:


{
xtype: 'editorgrid',
region: 'center',
id: 'participants-grid',
border: false,
enableColumnResize: false,
width: 140,
layout: 'fit',
clicksToEdit: 1,
viewConfig: {
autoFill: true
},
store: new Ext.data.ArrayStore({
fields: [
{name: 'name'},
{name: 'delete'}
],
data: [
[null, null]
],
listeners: {
update: function(store, record, type){
if(type == Ext.data.Record.EDIT &&
record.isValid() &&
store.indexOf(record) == store.getCount() - 1) {
store.add(new store.recordType({id: null, name: null}));
}
}
}
}),
columns: [
{header: 'Uczestnicy', dataIndex: 'name', width: 100, sortable: true, menuDisabled: true, editor: new Ext.form.ComboBox({typeAhead: true, triggerAction: 'all', store: bookingUserStore, displayField:'name', mode: 'local'})},
{id: 'delete', header: 'Usu?', width: 40, sortable: false, menuDisabled: true, dataIndex: 0, renderer : function () {
return '<div><img src="resources/images/scheduler/delete.png" class="clickableImage deleteImage" /></div>';
}
}
],
initEvents: function(){
Ext.getCmp('participants-grid').on('cellclick', function(grid, rowIndex, columnIndex, e){
var deleteColumnIndex = Ext.getCmp('participants-grid').getColumnModel().getIndexById('delete');

if(columnIndex == deleteColumnIndex) {
var record = Ext.getCmp('participants-grid').getStore().getAt(rowIndex);
Ext.getCmp('participants-grid').getStore().remove(record);
Ext.getCmp('participants-grid').getView().refresh();
}
})
}
}


http://img535.imageshack.us/img535/5295/screenshot20100531at326.png