PDA

View Full Version : Problem to work with combo as grid cell editor



titu
9 Aug 2010, 2:24 AM
I am facing a problem to work with combo as grid cell editor. I'm using Ext Desktop app and the grid is in a window in the desktop. First time when the window is opened and the combo is accessed it works fine. After that when the window is closed and again opened then the cell becomes inaccessible and when I click on that cell to edit it throws an error ''this.el.dom is undefined" in ext-all-debug.js file.

The column is:


{
header : "Header",
dataIndex : 'dataindex',
id : 'dataid',
editor : this.eidtorCombo,
renderer : this
.editorComboRenderer(this.eidtorCombo),
width : 150
}

The renderer is:


editorComboRenderer : function(combo) {
return function(value) {
if (!combo.store) {
combo.store = Ext.StoreMgr.get(STORE_ID)
|| new Admin.PackagesListStore({
storeId : Admin.STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
});
}
var record = combo.findRecord(combo.valueField, value);
var defaultValue = value ? value : '';
var res = (record ? record.get(combo.displayField) : defaultValue);
return res;
}
}

And the combo is:


eidtorCombo : new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
forceSelection : true,
minChars : 1,
lazyRender : true,
listClass : 'x-combo-list-small',
store : Ext.StoreMgr.get(Admin.STORE_ID)
|| new Admin.PackagesListStore({
storeId : Admin.STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
}),
valueField : 'id',
displayField : 'feature'
})

Can anybody please help me?

Condor
9 Aug 2010, 2:47 AM
Destroying a window will destroy all components inside, including the grid. Destroying a grid will also destroy the columnmodel, including all editors.

This means that if you recreate the grid you will also need to recreate the editors (but you can reuse the store).

titu
9 Aug 2010, 2:56 AM
Yes, I'm recreating the grid. And I think that the editors are also recreating because the 'eidtorCombo' is a function of that grid.

Condor
9 Aug 2010, 3:06 AM
Are you sure? Can you post the complete code?

titu
9 Aug 2010, 3:29 AM
Here is my full code:


EA.Desktop.PackagesWindow = Ext.extend(Ext.app.Module, {
id : 'packages-window',
init : function() {
this.launcher = {
text : 'Products/Packages',
iconCls : 'tabs',
handler : this.createWindow,
scope : this
}
},
createWindow : function(src) {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('packages-window');
if (!win) {
win = desktop.createWindow({
id : 'packages-window',
title : 'Products/Packages',
width : 650,
height : 300,
layout : 'fit',

items : [new EA.Desktop.PackagesGrid()],
iconCls : 'tabs'
});
}
win.show();
}
});

EA.Desktop.PackagesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
id : 'packagesGridGrid',
initComponent : function() {
var checkColumn = new Ext.grid.CheckColumn({
header : 'Is Package',
dataIndex : 'ispackage',
id : 'ispackage',
width : 65,
sortable : true
});
Ext.applyIf(this, {
loadMask : true,
stripeRows : true,
border: false,
viewConfig : {
forceFit : String(Ext.util.Format.undef(EasyAdmin.UserState
.get('easyadmin.setting.autoFitGrid'))).length > 0
? EasyAdmin.UserState
.get('easyadmin.setting.autoFitGrid')
: true,
deferEmptyText : false,
emptyText : 'No items to display'
},
bodyStyle : {
border : '0px'
},
store : Ext.StoreMgr.get(EasyAdmin.Packages_STORE_ID)
|| new EasyAdmin.PackagesStore({
storeId : EasyAdmin.Packages_STORE_ID
}),
colModel : new Ext.grid.ColumnModel({
columns : [{
header : "Id",
dataIndex : 'id',
id : 'Id',
width : 0,
hidden : true
}, {
header : "Feature name",
dataIndex : 'feature',
id : 'feature',
width : 150,
/*
* editor : new Ext.form.TextField({
* allowBlank : false }),
*/
sortable : true
}, {
header : "Product name",
dataIndex : 'product',
id : 'product',
width : 180,
editor : new Ext.form.TextField({
allowBlank : false
}),
sortable : true
}, {
header : "Vendor",
dataIndex : 'vendor',
id : 'vendor',
editor : new Ext.form.TextField({
allowBlank : false
}),
width : 120,
sortable : true
}, {
header : "Parent Package",
dataIndex : 'parentpackage',
id : 'parentpackage',
editor : this.eidtorCombo,
renderer : this
.editorComboRenderer(this.eidtorCombo),
width : 150
}, checkColumn],
isCellEditable : function(col, row) {
var record = Ext.getCmp('packagesGridGrid').store
.getAt(row);
if (record.get('ispackage') == true
&& this.columns[col].id == 'parentpackage') {
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable
.call(this, col, row);
}
}),
autoExpandColumn : 'feature',
clicksToEdit : 1,
plugins : checkColumn

});

this.tbar = this.buildTopToolbar();
if (!this.bbar)
this.bbar = new EasyAdmin.ux.PagingToolbar({
store : this.store,
displayInfo : true,
pageSize : EasyAdmin.UserState
.get('easyadmin.setting.recordsperpage')
}, this);
if (!(this.bbar instanceof Ext.Toolbar)) {
this.bbar = new EasyAdmin.ux.PagingToolbar(this.bbar);
}
this.addEvents('AddFeatureToPackageGrid');
this.on('AddFeatureToPackageGrid', this.AddFeatureToPackageGrid, this);
this.on("cellclick", function(grid, rowIndex, columnIndex, e) {
this.fireEvent('celldblclick', grid, rowIndex, columnIndex,
e)
}, this);
EA.Desktop.PackagesGrid.superclass.initComponent.call(this);
},
onRender : function(ct, position) {
this.store.setBaseParam('start', 0);
this.store.setBaseParam('limit', EasyAdmin.UserState
.get('easyadmin.setting.recordsperpage'));
// this.store.sort('feature', 'ASC');
this.store.load();
this.store.sort('feature', 'ASC');
EA.Desktop.PackagesGrid.superclass.onRender.call(this, ct, position);
},

onDestroy : function() {
Ext.destroy();
this.un('AddFeatureToPackageGrid', this.AddFeatureToPackageGrid, this);
EA.Desktop.PackagesGrid.superclass.onDestroy.call(this);
},

applyState : function(state) {
EasyAdmin.Util.ApplyGridState(this, state);
},

buildTopToolbar : function() {
return [{
text : 'Add',
iconCls : 'silk-add',
handler : this.onAdd,
scope : this
}, '-', {
text : 'Delete',
iconCls : 'silk-delete',
handler : this.onDelete,
scope : this
}, '-', {
text : 'Save',
iconCls : 'silk-save',
handler : this.onSave,
scope : this
}];
},

onSave : function(btn, ev) {
this.getStore().each(function(record) {
// new record
if (Ext.util.Format.undef(record.data.id) == '') {
this.newRecord.push(record.data);
}
// edited record
else if (record.dirty) {
this.editedRecord.push(record.data);
}
}, this);
this.saverequest();
},

onAdd : function(btn, ev) {
new EasyAdmin.Features.FeaturesWindow({
obj : this,
eventName : 'AddFeatureToPackageGrid'
}).show();
},

onDelete : function(btn, ev) {
var index = this.getSelectionModel().getSelectedCell();
if (!index) {
return false;
}
var rec = this.store.getAt(index[0]);
if (rec.data.id) {
this.deletedRecord.push(rec.data.id);
}
this.store.remove(rec);
},
saveURL : proxy('http://localhost/easyadminextjs/samplexml/SavePackages.xml'),

saveTpl : function() {
var store = this.getStore();
var totalRow = store.getTotalCount();
var tpl = '<ULM>' + '<MESSAGE type="UpdateFeturesDescriptionList" />';
+'<PARAMETERS>';
tpl += '<PARAM type="edit">';

for (var i = 0; i < this.editedRecord.length; i++) {
tpl += '<RECORD id="' + this.editedRecord[i].id + '" '
+ 'feature="' + this.editedRecord[i].feature + '" '
+ 'product="' + this.editedRecord[i].product + '" '
+ 'vendor="' + this.editedRecord[i].vendor + '" '
+ 'ispackage="' + this.editedRecord[i].ispackage + '" '
+ 'parent_package_id="'
+ this.editedRecord[i].parentpackage + '" />';
}
tpl += '</PARAM>';

tpl += '<PARAM type="add">';

for (var i = 0; i < this.newRecord.length; i++) {
tpl += '<RECORD feature="' + this.newRecord[i].feature + '" '
+ 'product="' + this.newRecord[i].product + '" '
+ 'vendor="' + this.newRecord[i].vendor + '" '
+ 'ispackage="' + this.newRecord[i].ispackage + '" '
+ 'parent_package_id="' + this.newRecord[i].parentpackage
+ '" />';
}
tpl += '</PARAM>';

tpl += '<PARAM type="delete">';

for (var i = 0; i < this.deletedRecord.length; i++) {
tpl += '<RECORD id="' + this.deletedRecord[i] + '" />';
}
tpl += '</PARAM>';

tpl += '</ULM>';
return tpl;

},

saverequest : function() {
Ext.Ajax.request({
url : this.saveURL,
params : {
body : this.saveTpl()
},
success : EasyAdmin.responseMessageCallback(
this.saveSuccessFn, this),
failure : EasyAdmin.failureMessageCallback,
callback : function() {
this.deletedRecord = [];
this.newRecord = [];
this.editedRecord = [];
},
scope : this
});
},

saveSuccessFn : function(msg) {
if (msg.type == 'SUCCESS') {
Ext.Msg.alert("Message", "Data saved successfully.");
}
},
AddFeatureToPackageGrid : function(feature) {
this.focus();
var u = new this.store.recordType({
feature : feature,
product : '',
vendor : '',
parentpackage : '',
ispackage : false
});
this.stopEditing();
this.store.insert(0, u);
this.startEditing(0, 2);
},
editorComboRenderer : function(combo) {
return function(value) {
if (!combo.store) {
combo.store = Ext.StoreMgr.get(EasyAdmin.PackagesList_STORE_ID)
|| new EasyAdmin.PackagesListStore({
storeId : EasyAdmin.PackagesList_STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
});
}
var record = combo.findRecord(combo.valueField, value);
var defaultValue = value ? value : '';
var res = (record ? record.get(combo.displayField) : defaultValue);
return res;
}
},
eidtorCombo : new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
forceSelection : true,
minChars : 1,
lazyRender : true,
listClass : 'x-combo-list-small',
store : Ext.StoreMgr.get(EasyAdmin.PackagesList_STORE_ID)
|| new EasyAdmin.PackagesListStore({
storeId : EasyAdmin.PackagesList_STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
}),
valueField : 'id',
displayField : 'feature'
}),
deletedRecord : [],
newRecord : [],
editedRecord : []

});

titu
9 Aug 2010, 3:54 AM
Here is my full code:


EA.Desktop.PackagesWindow = Ext.extend(Ext.app.Module, {
id : 'packages-window',
init : function() {
this.launcher = {
text : 'Products/Packages',
iconCls : 'tabs',
handler : this.createWindow,
scope : this
}
},
createWindow : function(src) {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('packages-window');
if (!win) {
win = desktop.createWindow({
id : 'packages-window',
title : 'Products/Packages',
width : 650,
height : 300,
layout : 'fit',

items : [new EA.Desktop.PackagesGrid()],
iconCls : 'tabs'
});
}
win.show();
}
});

EA.Desktop.PackagesGrid = Ext.extend(Ext.grid.EditorGridPanel, {
id : 'packagesGridGrid',
initComponent : function() {
var checkColumn = new Ext.grid.CheckColumn({
header : 'Is Package',
dataIndex : 'ispackage',
id : 'ispackage',
width : 65,
sortable : true
});
Ext.applyIf(this, {
loadMask : true,
stripeRows : true,
border: false,
viewConfig : {
forceFit : String(Ext.util.Format.undef(EasyAdmin.UserState
.get('easyadmin.setting.autoFitGrid'))).length > 0
? EasyAdmin.UserState
.get('easyadmin.setting.autoFitGrid')
: true,
deferEmptyText : false,
emptyText : 'No items to display'
},
bodyStyle : {
border : '0px'
},
store : Ext.StoreMgr.get(EasyAdmin.Packages_STORE_ID)
|| new EasyAdmin.PackagesStore({
storeId : EasyAdmin.Packages_STORE_ID
}),
colModel : new Ext.grid.ColumnModel({
columns : [{
header : "Id",
dataIndex : 'id',
id : 'Id',
width : 0,
hidden : true
}, {
header : "Feature name",
dataIndex : 'feature',
id : 'feature',
width : 150,
/*
* editor : new Ext.form.TextField({
* allowBlank : false }),
*/
sortable : true
}, {
header : "Product name",
dataIndex : 'product',
id : 'product',
width : 180,
editor : new Ext.form.TextField({
allowBlank : false
}),
sortable : true
}, {
header : "Vendor",
dataIndex : 'vendor',
id : 'vendor',
editor : new Ext.form.TextField({
allowBlank : false
}),
width : 120,
sortable : true
}, {
header : "Parent Package",
dataIndex : 'parentpackage',
id : 'parentpackage',
editor : this.eidtorCombo,
renderer : this
.editorComboRenderer(this.eidtorCombo),
width : 150
}, checkColumn],
isCellEditable : function(col, row) {
var record = Ext.getCmp('packagesGridGrid').store
.getAt(row);
if (record.get('ispackage') == true
&& this.columns[col].id == 'parentpackage') {
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable
.call(this, col, row);
}
}),
autoExpandColumn : 'feature',
clicksToEdit : 1,
plugins : checkColumn

});

this.tbar = this.buildTopToolbar();
if (!this.bbar)
this.bbar = new EasyAdmin.ux.PagingToolbar({
store : this.store,
displayInfo : true,
pageSize : EasyAdmin.UserState
.get('easyadmin.setting.recordsperpage')
}, this);
if (!(this.bbar instanceof Ext.Toolbar)) {
this.bbar = new EasyAdmin.ux.PagingToolbar(this.bbar);
}
this.addEvents('AddFeatureToPackageGrid');
this.on('AddFeatureToPackageGrid', this.AddFeatureToPackageGrid, this);
this.on("cellclick", function(grid, rowIndex, columnIndex, e) {
this.fireEvent('celldblclick', grid, rowIndex, columnIndex,
e)
}, this);
EA.Desktop.PackagesGrid.superclass.initComponent.call(this);
},
onRender : function(ct, position) {
this.store.setBaseParam('start', 0);
this.store.setBaseParam('limit', EasyAdmin.UserState
.get('easyadmin.setting.recordsperpage'));
// this.store.sort('feature', 'ASC');
this.store.load();
this.store.sort('feature', 'ASC');
EA.Desktop.PackagesGrid.superclass.onRender.call(this, ct, position);
},

onDestroy : function() {
Ext.destroy();
this.un('AddFeatureToPackageGrid', this.AddFeatureToPackageGrid, this);
EA.Desktop.PackagesGrid.superclass.onDestroy.call(this);
},

applyState : function(state) {
EasyAdmin.Util.ApplyGridState(this, state);
},

buildTopToolbar : function() {
return [{
text : 'Add',
iconCls : 'silk-add',
handler : this.onAdd,
scope : this
}, '-', {
text : 'Delete',
iconCls : 'silk-delete',
handler : this.onDelete,
scope : this
}, '-', {
text : 'Save',
iconCls : 'silk-save',
handler : this.onSave,
scope : this
}];
},

onSave : function(btn, ev) {
this.getStore().each(function(record) {
// new record
if (Ext.util.Format.undef(record.data.id) == '') {
this.newRecord.push(record.data);
}
// edited record
else if (record.dirty) {
this.editedRecord.push(record.data);
}
}, this);
this.saverequest();
},

onAdd : function(btn, ev) {
new EasyAdmin.Features.FeaturesWindow({
obj : this,
eventName : 'AddFeatureToPackageGrid'
}).show();
},

onDelete : function(btn, ev) {
var index = this.getSelectionModel().getSelectedCell();
if (!index) {
return false;
}
var rec = this.store.getAt(index[0]);
if (rec.data.id) {
this.deletedRecord.push(rec.data.id);
}
this.store.remove(rec);
},
saveURL : proxy('http://localhost/easyadminextjs/samplexml/SavePackages.xml'),

saveTpl : function() {
var store = this.getStore();
var totalRow = store.getTotalCount();
var tpl = '<ULM>' + '<MESSAGE type="UpdateFeturesDescriptionList" />';
+'<PARAMETERS>';
tpl += '<PARAM type="edit">';

for (var i = 0; i < this.editedRecord.length; i++) {
tpl += '<RECORD id="' + this.editedRecord[i].id + '" '
+ 'feature="' + this.editedRecord[i].feature + '" '
+ 'product="' + this.editedRecord[i].product + '" '
+ 'vendor="' + this.editedRecord[i].vendor + '" '
+ 'ispackage="' + this.editedRecord[i].ispackage + '" '
+ 'parent_package_id="'
+ this.editedRecord[i].parentpackage + '" />';
}
tpl += '</PARAM>';

tpl += '<PARAM type="add">';

for (var i = 0; i < this.newRecord.length; i++) {
tpl += '<RECORD feature="' + this.newRecord[i].feature + '" '
+ 'product="' + this.newRecord[i].product + '" '
+ 'vendor="' + this.newRecord[i].vendor + '" '
+ 'ispackage="' + this.newRecord[i].ispackage + '" '
+ 'parent_package_id="' + this.newRecord[i].parentpackage
+ '" />';
}
tpl += '</PARAM>';

tpl += '<PARAM type="delete">';

for (var i = 0; i < this.deletedRecord.length; i++) {
tpl += '<RECORD id="' + this.deletedRecord[i] + '" />';
}
tpl += '</PARAM>';

tpl += '</ULM>';
return tpl;

},

saverequest : function() {
Ext.Ajax.request({
url : this.saveURL,
params : {
body : this.saveTpl()
},
success : EasyAdmin.responseMessageCallback(
this.saveSuccessFn, this),
failure : EasyAdmin.failureMessageCallback,
callback : function() {
this.deletedRecord = [];
this.newRecord = [];
this.editedRecord = [];
},
scope : this
});
},

saveSuccessFn : function(msg) {
if (msg.type == 'SUCCESS') {
Ext.Msg.alert("Message", "Data saved successfully.");
}
},
AddFeatureToPackageGrid : function(feature) {
this.focus();
var u = new this.store.recordType({
feature : feature,
product : '',
vendor : '',
parentpackage : '',
ispackage : false
});
this.stopEditing();
this.store.insert(0, u);
this.startEditing(0, 2);
},
editorComboRenderer : function(combo) {
return function(value) {
if (!combo.store) {
combo.store = Ext.StoreMgr.get(EasyAdmin.PackagesList_STORE_ID)
|| new EasyAdmin.PackagesListStore({
storeId : EasyAdmin.PackagesList_STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
});
}
var record = combo.findRecord(combo.valueField, value);
var defaultValue = value ? value : '';
var res = (record ? record.get(combo.displayField) : defaultValue);
return res;
}
},
eidtorCombo : new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
forceSelection : true,
minChars : 1,
lazyRender : true,
listClass : 'x-combo-list-small',
store : Ext.StoreMgr.get(EasyAdmin.PackagesList_STORE_ID)
|| new EasyAdmin.PackagesListStore({
storeId : EasyAdmin.PackagesList_STORE_ID,
listeners : {
beforeload : function(store, options) {
if (typeof store.baseParams.query != 'undefined')
delete store.baseParams.query;
}
}
}),
valueField : 'id',
displayField : 'feature'
}),
deletedRecord : [],
newRecord : [],
editedRecord : []

});